css3动画第一式--简单翻滚
2015-11-17 12:18
806 查看
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~
![](http://images2015.cnblogs.com/blog/624737/201511/624737-20151120153849186-1941789179.gif)
查看原地址
下面放代码:
然后,你可能看不到效果?少年,该升级浏览器啦~~~
![](http://images2015.cnblogs.com/blog/624737/201511/624737-20151120153849186-1941789179.gif)
查看原地址
下面放代码:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>test</title> <style> .box { position: relative; margin-top: 50px; height: 60px; } .test { position: absolute; top: 0; left: 0; width: 100px; height: 50px; font:14px/50px Microsoft YaHei; text-align: center; color: #fff; border-radius: 5px; background-color: #eb5C7e; -webkit-animation-name: gogogo; -webkit-animation-duration: 6s; -webkit-animation-timing-function:ease; -webkit-animation-iteration-count: infinite; animation-name: gogogo; animation-duration: 6s; animation-timing-function:ease; animation-iteration-count: infinite; } @-webkit-keyframes gogogo { 0% { background-color: #eb5C7e; -webkit-transform: rotate(0); } 10% { background-color: #eb5C7e; -webkit-transform: rotate(0); } 30%{ background-color: #1b9e55; left: 0; -webkit-transform: rotate(30deg); } 50%{ left: 400px; background-color: #2a7df8; -webkit-transform: rotate(0); } 70%{ left: 400px; background-color: #2a7df8; -webkit-transform: rotate(0); } 100%{ left:0; background-color: #eb5C7e; -webkit-transform: rotate(-360deg); } } @keyframes gogogo { 0% { background-color: #eb5C7e; transform: rotate(0); } 10% { background-color: #eb5C7e; transform: rotate(0); } 30%{ background-color: #1b9e55; left: 0; transform: rotate(30deg); } 50%{ left: 400px; background-color: #2a7df8; transform: rotate(0); } 70%{ left: 400px; background-color: #2a7df8; transform: rotate(0); } 100%{ left:0; background-color: #eb5C7e; transform: rotate(-360deg); } } </style> </head> <body> <div class="box"> <div class="test"> 翻滚吧 </div> </div> </body> </html>
然后,你可能看不到效果?少年,该升级浏览器啦~~~
相关文章推荐
- 手机web——自适应网页设计(html/css控制)
- css3
- 史上最全的CSS hack方式一览
- 使用纯CSS设计网页下拉菜单代码
- CSS Sprites 网页背景图片定位技术简述
- 让IE6/IE7/IE8浏览器支持CSS3属性
- Css鼠标选中文字后改变背景色的实现代码
- CSS技巧(一):清除浮动
- css改变背景透明度
- 用css打造一个三角形箭头
- CSS3实现时间表
- CSS3制作404立体字体
- CSS学习<3>
- css3编写导航栏
- 【01】CSS制作的图形
- 字体颜色 背景颜色 css所知道的颜色设1
- CSS 高度(css height)
- css 兼容性
- CSS基础学习
- CSS 布局