2024年11月24日 建站教程
css3如何实现圆形旋转动画效果，下面web建站小编给大家详细介绍一下具体实现代码！
html代码：
<div class="arc-rotate"> <div class="demo"></div> </div>
css3语法：
body {
background: #f00;
}
.arc-rotate {
width: 300px;
height: 300px;
border: 3px solid white;
border-top-color: green;
border-bottom-color: red;
margin: 100px;
border-radius: 50%;
animation: circle 4s infinite linear;
background: white;
}
@-webkit-keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.demo {
width: 250px;
height: 250px;
border: 3px solid white;
border-left-color: blue;
border-right-color: yellow;
margin: 25px;
border-radius: 50%;
animation: circle 4s infinite ease;
background: white;
}
本文链接：http://so.lmcjl.com/news/18408/