CSS3常用動畫
阿新 • • 發佈:2019-01-11
漸變縮放圓圈
<style>
.circle{
position: relative;
z-index:1;
margin:400px auto;
height:2px;
width:2px;
background:#2095ff;
border-radius:50%;
animation:circle .7s linear infinite; /*infinite使動畫無線迴圈*/
}
.circle span{
position: absolute;
z-index:0;
top:-1px;
left :-1px;
height:4px;
width:4px;
background:#2095ff;
border-radius:50%;
animation:span .7s linear infinite;
}
@keyframes circle{ /*circle 小--特大--大,透明-不透明--透明*/
0% {transform:scale(0.1);opacity:0;}
50% {transform:scale(1.5);opacity:1;}
100% {transform:scale(1);opacity:0;}
}
@keyframes span{ /*span 小--較大,不透明--透明*/
0% {transform:scale(0.1);opacity:1;}
100% {transform:scale(1.2);opacity:0;}
}
</style>
<body>
<div class="circle"><span></span></div>
</body>
css3圓環轉盤
infinite:持續動畫;
linear :勻速動畫;
<style>
.circle{height:100px;width:100 px;border:100px solid;border-left-color:red;border-right-color:green;border-top-color:yellow;border-bottom-color:purple;border-radius:50%;margin:100px auto;
}
.circle.move{
animation:rotate 1s infinite linear;
-moz-animation:rotate 1s infinite linear;
-webkit-animation:rotate 1s infinite linear;
-o-animation: rotate 1s infinite linear;
}
@keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-webkit-keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-moz-keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-o-keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
</style>
<div class="circle move"></div>