Heim > Artikel > Web-Frontend > css3动画第一式简单翻滚_html/css_WEB-ITnose
css3动画第一式简单翻滚_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:25975Durchsuche
在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> 然后，你可能看不到效果？少年，该升级浏览器啦~~~
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：20151117小问题_html/css_WEB-ITnoseNächster Artikel：HTML与CSS入门--第五章 使用文本块和列表_html/css_WEB-ITnose