<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋轉跑動效果</title>
<style>
#CD{
width: 800px;
height: 800px;
background-color: #7FFF00;
margin: 50px auto;
border-radius: 50%;
text-align: center;
line-height: 300px;
color: fuchsia;
font-size: 40px;
/*控制次數*/
/*animation: name 2s 2;
-webkit-animation: name 2s 2;*/
/*交替*/
/*animation: name 2s 2 alternate;
-webkit-animation: name 2s 2 alternate;*/
/*一直旋轉*/
animation: name 2s infinite linear;
-webkit-animation: name 2s infinite linear;
}
/*#mydiv{
width: 50px;
height: 50px;
background-color: lightseagreen;
position: relative;
animation: myname 3s;
-webkit-animation: myname 3s;
}
@keyframes myname{
0{
top: 40px;
left: 30px;
background-color: khaki;
}
30%{
top: 40px;
left: 30px;
background-color: khaki;
}
60%{
top: 83px;
left: 70px;
background-color:chartreuse;
}
100%{
top: 830px;
left: 330px;
background-color: orange;
}
}*/
@keyframes name{
from{
transform: rotate(0);
}
to{transform: rotate(360deg);}
}
/*@keyframes name{
0%{}
20%{}
40%{}
80%{}
100%{}
}*/
@-moz-keyframes name{
from{
transform:rotate(0) ;
}
to{ transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="CD">HELLO</div>
<div id="mydiv">TEXT</div>
</body>
</html>
旋轉跑動效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.