Rumah > Artikel > hujung hadapan web > css3动画第一式简单翻滚_html/css_WEB-ITnose
css3动画第一式简单翻滚_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:33:25975semak imbas
在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> 然后，你可能看不到效果？少年，该升级浏览器啦~~~
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：20151117小问题_html/css_WEB-ITnoseArtikel seterusnya：HTML与CSS入门--第五章 使用文本块和列表_html/css_WEB-ITnose