CSS3打造不断旋转的CD封面
最初看到这个效果是在一个音乐站,http://jing.fm,这个网站的界面做得非常不错,音乐也很有风格。当我第一次进入这个网站时最感兴趣的还是中间那个不断旋转的光盘封面,就想知道它是如何运作的,以及如何能把它也放在我的网站首页上面以增加效果,具体的效果可以去jing.fm看下,用新浪微博账号即可登录。
我提取的效果仅仅包含了使其旋转的部分代码,并没有包括中间的暂停按钮,可以到这里去查看演示以及源代码。
演示中用的图片及CSS代码全部从jing.fm提取,我只是对它做了一些简化。再者由于本人刚接触网页不太久,很多东西还不能得到深刻的认识,目前就先分享一些简单的内容。
会CSS的人从源码都能看懂它的工作方式,我只解释一些我自己学习过程中有疑惑的地方,如果有不懂的可以留言。
一、原本是一个矩形的光盘封面如何被嵌入到一个圆形的区域中
这是我刚开始最小知道的问题,怎样能用CSS把图形嵌入到一个形状中,后来研究图片发现它是把一个中间镂空的PNG图形放在了最上面,把封面放在下面一层,使用position:absolute进行定位,使CD封面处于镂空的中间位置,这样看起来就好像是把封面嵌入到了背景里面。
二、如何使背景图形位于CD封面的上方
看图片发现所谓的背景图形只是其中一部分,使用z-index把它的层次调高,让CD封面的层次靠下,这样背景图形就位于CD封面上面了。
三、如何让CD封面不断自动旋转
这个是重点。研究CSS3的时候发现有一个transform效果可以使图形旋转,并且可以指定旋转中心(当然这里旋转中心就是图形的中央,所以不需要特别指定),使用transform:rotate(360deg)可以使图形旋转一周,但并不能让它持续旋转。在使用FireBug查看jing.fm里面的元素样式的时候找到一个animation可以控制旋转但复制下来后却起不到作用。
后来查看w3School上的CSS3教程得知animation应该是和keyframe配套的,在animation上需要指定效果的名称。继续查找jing.fm的CSS样式,最后终于找到了关键代码,即:
1
|
@keyframes rotate{
|
2
|
from{-webkit-transform:rotate( 0 deg)}
|
3
|
to{-webkit-transform:rotate( 360 deg)}
|
4
|
}
|
animation效果里面就是调用这个rotate。animation里面有一个选项是可以控制效果循环的次数的,当然,设成无限循环就行了。整体代码如下:
CSS
1
|
@-webkit-keyframes rotate{
|
2
|
from{-webkit-transform:rotate( 0 deg)}
|
3
|
to{-webkit-transform:rotate( 360 deg)}
|
4
|
}
|
5
|
@-moz-keyframes rotate{
|
6
|
from{-moz-transform:rotate( 0 deg)}
|
7
|
to{-moz-transform:rotate( 360 deg)}
|
8
|
}
|
9
|
@-ms-keyframes rotate{
|
10
|
from{-ms-transform:rotate( 0 deg)}
|
11
|
to{-ms-transform:rotate( 360 deg)}
|
12
|
}
|
13
|
@-o-keyframes rotate{
|
14
|
from{-o-transform:rotate( 0 deg)}
|
15
|
to{-o-transform:rotate( 360 deg)}
|
16
|
}
|
17
|
18
|
.tupain{
|
19
|
background-image : url (img/cd.jpg);
|
20
|
background-repeat : no-repeat ;
|
21
|
animation: 9.5 s linear 0 s normal none infinite rotate;
|
22
|
-webkit-animation: 9.5 s linear 0 s normal none infinite rotate;
|
23
|
height : 300px ;
|
24
|
width : 300px ;
|
25
|
position : absolute ;
|
26
|
top : 74px ;
|
27
|
left : 73px ;
|
28
|
z-index : 0 ;
|
29
|
}
|
30
|
31
|
.zhezhao{
|
32
|
background : url (img/playerMask.png) no-repeat ;
|
33
|
height : 430px ;
|
34
|
width : 430px ;
|
35
|
z-index : 1 ;
|
36
|
position : absolute ;
|
37
|
}
|
HTML
1
|
< div >
|
2
|
< div class = "zhezhao" ></ div >
|
3
|
< div class = "tupian" ></ div >
|
4
|
</ div >
|
本文固定链接: http://blog.icewingcc.com/css3-rotate-cdcover.html | 冰翼博客
转载于:https://www.cnblogs.com/wangxy/p/4991436.html
CSS3打造不断旋转的CD封面相关推荐
- html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
- html旋转有阴影,CSS3打造带阴影的旋转3D图像
转至:http://www.shejidaren.com/css-3d-p_w_picpaths-flip-gallery.html CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D ...
- CSS3打造的10种创意动画菜单效果
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...
- css对称旋转,CSS3 transform平面旋转
CSS3 transform平面旋转 1.translate(x,y) 设置盒子位移 2.scale(x,y) 设置盒子缩放 3.rotate(deg) 设置盒子旋转 4.skew(x-angle,y ...
- 如何用css3实现简单旋转的风车
如何用css3实现简单旋转的风车 在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转,其实也没什么难度的.先设置它的样式,然后要用定位把它放到合适的位置就可以了. HTML的代码如下 ...
- html5和css3打造一款创意404页面
之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览 源码下载 实现的代码. h ...
- html立方体旋转展开,css3技术设计立方体旋转发光效果动图
CSS3 3D立方体旋转发光动画特效 body { margin: 0; overflow: hidden; width: 100vw; height: 100vh; background: #222 ...
- html头像动画,用CSS3实现头像旋转效动画
这次给大家带来用CSS3实现头像旋转效动画,用CSS3实现头像旋转效动画的注意事项有哪些,下面就是实战案例,一起来看一下. 鼠标未放上效果: 鼠标放上之后旋转效果: transition: all 2 ...
- css3实现磨砂效果,CSS3打造磨砂玻璃背景效果
简介 这个效果是在看CSS Secrets这书上看到的,感觉很不错; 实现原理也挺简单的; 效果图及实现 效果图 代码实现 Document /** * 设置背景图全屏覆盖及固定 * 设置内部元素偏移 ...
最新文章
- python中怎么打开文件_python如何打开文件
- Spring扫描类过程解析和案例
- JNI中参数的传递与操作
- java jlist 图标_java – 将图像添加到JList项目
- javaEE的开发模式
- python编程中的if __name__ == 'main': 的作用和原理[2]
- mysql_query
- Enterprise Library 3.1 简化使用范例一
- centOS7中使用Nginx部署静态网页
- SnowNLP自然语言处理模块具体用法
- 开源代码授权Licence说明
- [已解决]VitrualBox 启动linux虚拟机后,无法访问网络解决方法
- python实际应用2-拆分PDF
- mysql gone away的几种原因
- Linux shell复习
- vue开发微信公众号订阅消息踩坑记录
- Android 强制设置横屏或竖屏
- MySQL设计一张学生表选择的数据类型保存学号,姓名,性别,出生日期,入学日期,家庭住址信息。
- 网络综合布线公式 实用
- 报名信息填写完成! 您的报名号请牢记!
热门文章
- 医院微信应用解决方案
- mysql数据库创建带横杠的数据库名
- python中的a[::1]类型
- 高效构建机器学习系统
- ModBus-RTU详解
- 计算机管理没用调制解调器,电脑调制解调器错误连不上网
- 第五届ACM/IEEE边缘计算国际研讨会 论文征集
- 畅享5刷机原生android,华为畅享5(TIT-AL00/全网通)一键刷机教程图解,怎么刷机简单...
- ios Rn0.44 Xcode9 ScrollView下拉距离过短或下拉刷新后 不能自动回弹、复位置顶
- 通过语音发展史及语音识别产品对比,来看看语音识别技术都有哪些难点-通信/网络-与非网...