css圆弧动画

关注

原创最新推荐文章于 2026-04-04 02:47:03 发布 760 阅读 AI 写同款· GEO 优化 ›

如何实现CSS半圆进度条这样就可以实现一个简单的CSS半圆进度条，通过设置不同的“data-progress”属性值来控制进度条的进度。3创建一个伪元素作为进度条，并将其设置为一个半圆形，并将其旋转90度，以使其开始在12点钟位置。1 创建一个具有指定半径和高度的div元素，并将其设置为圆形。2 将元素的边框设置为半透明，以便更好地显示进度条。4 使用CSS动画或过渡来实现进度条的动态效果。阅读详情

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
 <style>
.body{
    background-color: aqua;
    height: 700px;
    width: 1000px;
   
} 
@keyframes bimg1 { 
    0% {top: 400px;} 
    50% {top:0px;transform:scale(1);opacity: 1; }   
    100% {top:0px; transform:scale(2);opacity: 0;}   
} 
@keyframes bimg2 { 
    0%  {left: 0;}
    100% {left: 400px;} 
} 
 #item {  
  animation: bimg1 7s infinite cubic-bezier(0,1,0,1),bimg2 7s infinite cubic-bezier(0,0,0,1); 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  background: red; 
}
@keyframes bimg3 { 
    0% {top: 400px;} 
    50% {top:0px;transform:scale(1);opacity: 1; } 
    100% {top:0px;transform:scale(2);opacity: 0;} 
    
} 
@keyframes bimg4 { 
    0%  {left: 800px;}
    100% {left: 400px;} 
} 
 #item2 {  
  animation: bimg3 7s infinite cubic-bezier(0,1,0,1),bimg4 7s infinite cubic-bezier(0,1,0,1); 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  background: yellow;

} 
 

 
 </style>
</head>
<body>
    <div class="body">
        <div id="item">
      
        </div> 
        <div id="item2">
      
        </div> 
    </div>
  
</body>
</html>