CSS3 圆环旋转效果
一、CSS3圆环旋转效果 1
原理:设置不同效果的边框,进行宣传
<div class="demo"></div> <style> .demo { width: 250px; height: 250px; border: 50px solid red; border-left-color: blue; border-right-color: yellow; border-top-color: #04f105; margin: 100px; border-radius: 50%; animation: circle 2s infinite linear; } @keyframes circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } </style>
二、Css 3圆环效果2
原理:使用多层边框下沟哦,执行旋转
<div class="demoout"> <div class="demo"></div> </div> <style> body { background: black; } .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; } .demoout { 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); } } </style>
效果如下:
更多: