苹果html5插件,纯CSS打造各种超逼真的苹果（Apple）设备模型
CSSDevices是一款使用纯CSS制作的各种超逼真的苹果(Apple)设备模型。这些CSS苹果设备模型中可以嵌入图片、文字、视频等HTML元素，并且非常容易的就可以制作出轮播图的效果。
使用方法
使用该CSS苹果设备模型特效需要在页面中引入devices.min.css文件，可以选择引入jQuery和devices.js文件。
iphone设备模型
iphone设备模型的基本HTML结构如下：
可选的iphone设备class有：
cd-iphone-5s
cd-iphone-5c
cd-iphone-6
cd-iphone-6-plus
cd-red
cd-green
cd-yellow
cd-white
cd-silver
cd-gold
cd-rosegold
...
ipad设备模型
ipad设备模型的基本HTML结构如下：
可选的ipad设备class有：
cd-silver
cd-gold
...
mac设备模型
mac设备模型的基本HTML结构如下：
可选的mac设备class有：
cd-pro
...
watch设备模型
watch设备模型的基本HTML结构如下：
可选的watch设备class有：
cd-white-band
cd-green-band
cd-pink-band
cd-black-band
cd-brown-band
cd-tan-band
cd-navy-band
cd-red-band
cd-linked-band
cd-black
cd-gold
cd-rosegold
cd-no-bracket
...
小技巧
设备模型的尺寸
该CSS苹果设备模型中内置了9种不同尺寸的class类，将它们应用在父容器元素上，可以修改设备模型的尺寸。
cd-scale-10
cd-scale-20
cd-scale-30
cd-scale-40
cd-scale-50
cd-scale-60
cd-scale-70
cd-scale-80
cd-scale-90
class中的数字代表要缩放到原始尺寸的百分比，例如：cd-scale-70表示缩小到原始尺寸的70%。
如果你想缩小模型中显示的文字的大小，可以通过CSS样式来设置一个字体的百分比，例如下面的例子将字体大小缩小65%。
...
设备模型居中
要在父容器中水平居中设备模型，可以添加cd-center class类。
...
Blueprint助手
可以通过添加cd-blueprint class来使模型应用"blueprint"主题。
...
横屏设置
横屏设置只有在iphone和ipad设备中有效果。
...
或者：
...
默认情况下，屏幕不会随着设备来旋转图片，如果你需要元素进行旋转，可以添加cd-landscape-fixed-screen class类。
...
屏幕滚动
在屏幕div中添加cd-screen-scrolling 类可以使图片垂直滚动。
...
...
全屏设置
要使设备模型占据整个父容器，可以为它添加cd-fill-parent class类。
...
苹果html5插件,纯CSS打造各种超逼真的苹果（Apple）设备模型相关推荐
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- 纯CSS打造的Family tree（族谱）
Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系.本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中. 查看 ...
- html图片倒角,CSS实例：纯CSS打造斜角
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的.这种技术现在已经完全过时了,这里不讨论.CSS+DI ...
- html银白色,纯CSS打造银色MacBookAir（二）_html/css_WEB-ITnose
上一篇:<纯CSS打造银色MacBook Air(一)> 写在前面 上一篇我们谈了<纯CSS打造银色MacBook Air(一)>,今天我们接着谈. First注:如果图片过大 ...
- 精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
- 纯css打造超能陆战队--大白
纯css打造超能陆战队–大白 要点 思路 要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger ...
- html自动平分宽度,HTML5使用纯CSS实现“按比例平分”整个垂直空间
HTML5使用纯CSS实现"按比例平分"整个垂直空间 需求 需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式. ...
- 纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
- css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦.本教程包含各种形 ...
最新文章
- 当输入 xxxxHub 后，到网页显示，其间发生了什么？
- php7有没有使用jit,RegEx不适用于长模式PCRE的JIT编译器堆栈限制 – PHP7
- 最简单的java单例
- [Editor][003][Emacs] 从零到高级的进阶 - 实践开发 - emacs tutorial的使用和基本导航键
- java配置lib_Java环境配置
- Spark物理图的执行
- 基于HTML5的网络拓扑图 - 设备状态面板
- cni k8s 插件安装_使用kind来快速部署k8s环境
- C语言实现合并两个链表 含注释
- 比较linux的桌面环境的使用和异同?_深度UI + Ubuntu系统，堪称最强最美Linux发行版！你敢升级吗？...
- matlab灰色关联分析,灰色关联度分析（为什么不显示图像）大佬们帮我看看
- 【转】8段数码管引脚图,8段数码管动态显示详解
- excel分段函数c语言,实战：Excel 逻辑分段函数应用
- Dlib库实现人脸关键点检测（Opencv实现）
- OSChina 周五乱弹 —— 为什么程序媛那么少？
- python将xls文件转换xlsx
- CSS的三种使用方法
- Kubernetes切换Docker容器引擎为Containerd
- 常用颜色的RGB值及中英文名称对照表
- 【sex.com最贵的域名】