Home > Article > Web Front-end > css3动画第一式简单翻滚_html/css_WEB-ITnose
css3动画第一式简单翻滚_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:25975browse
在w3cschool上面查阅css3的动画语法手册时，发现“css3 动画”栏目首页放了一个翻滚的div动画案例，觉得挺好看的，于是就自己模仿着写了一下，感觉还行O(∩_∩)O哈哈~
查看原地址
下面放代码：
<!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> 然后，你可能看不到效果？少年，该升级浏览器啦~~~
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：20151117小问题_html/css_WEB-ITnoseNext article：HTML与CSS入门--第五章 使用文本块和列表_html/css_WEB-ITnose