音乐小转盘 css3 动画
2015-10-22 18:04
537 查看
<!DOCTYPE html> <html> <head> <title>rotate</title> <style type="text/css"> * { margin: 0px; padding: 0px; box-sizing: border-box; border: none; } body { margin: 0; padding: 0; } @keyframes spin { /*transform: rotateX(50deg);*/ 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } .inner { width: 100%; height: 100%; border-radius: 50%; background-color: #FF00FF; overflow: hidden; } .inner img { width: 100%; height: 100%; border-radius: 50%; -webkit-filter: blur(1px); transition-delay: 0.5s; transition: all 0.001s ease-in-out; } .out { width: 210px; height: 210px; border: 1px dashed red; border-radius: 50%; padding: 5px; margin: 250px auto; transform:rotateX(85deg); /*transform-origin:center;*/ } .roll{ animation: spin 6s linear infinite; width: 100%; height: 100%; } .inner:hover img { transform: scale(1.1, 1.1); -webkit-filter: blur(0px); } </style> </head> <body> <div class="out "> <div class="roll"> <div class="inner"> <img src="1.jpg"> </div></div> </div> </body> </html>
相关文章推荐
- css3转盘抽奖示例-转底盘
- CSS中position属性( absolute | relative | static | fixed )详解
- css3转盘抽奖示例-转指针
- DIV横向排列_CSS如何让多个div盒子并排同行显示
- CSS:透明度 opacity与rgba()的区别
- css购物车样式
- 自定义button样式,圆角按钮
- 【转载】koala 编译scss不支持中文解决方案(新增MAC解决方案)
- css3 动画
- CSS选择符总结
- CSS 颜色代码对应表
- css中的em用法
- css em弹性布局
- background属性用法总结
- css3之圆角效果 border-radius
- CSS各种居中方法
- 纯CSS画的基本图形技巧绘制(矩形、圆形、三角形、多边形、爱心、八卦等)
- css 文字超出省略号
- 一行数据过长,自动隐藏一部分数据样式
- CSS之position用法测试归纳