CSS3特效（3）——环形进度条

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:3908

css3特效
{}
环形进度条\n<!DOCTYPE html>\n<html lang=\en\>\n<head>\n <meta charset=\UTF-8\>\n <title>Title</title>\n <style>\n .circleProgress_wrapper{\n wid...

环形进度条

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      .circleProgress_wrapper{
         width: 200px;
         height: 200px;
         margin: 50px auto;
         position: relative;
         border:1px solid #ddd;
      }

      .wrapper{
         width: 100px;
         height: 200px;
         position: absolute;
         top:0;
         overflow: hidden;
      }
      .right{
         right:0;
      }
      .left{
         left:0;
      }
      .circleProgress{
         width: 160px;
         height: 160px;
         border:20px solid rgb(232, 232, 12);
         border-radius: 50%;
         position: absolute;
         top:0;
         -webkit-transform: rotate(45deg);
      }
      .rightcircle{
         border-top:20px solid green;
         border-right:20px solid green;
         right:0;
         -webkit-animation: circleProgressLoad_right 5s linear infinite;
      }
      .leftcircle{
         border-bottom:20px solid green;
         border-left:20px solid green;
         left:0;
         -webkit-animation: circleProgressLoad_left 5s linear infinite;
      }
      @-webkit-keyframes circleProgressLoad_right{
         0%{
            border-top:20px solid #ED1A1A;
            border-right:20px solid #ED1A1A;
            -webkit-transform: rotate(45deg);
         }
         50%{
            border-top:20px solid rgb(232, 232, 12);
            border-right:20px solid rgb(232, 232, 12);
            border-left:20px solid rgb(81, 197, 81);
            border-bottom:20px solid rgb(81, 197, 81);
            -webkit-transform: rotate(225deg);
         }
         100%{
            border-left:20px solid green;
            border-bottom:20px solid green;
            -webkit-transform: rotate(225deg);
         }
      }
      @-webkit-keyframes circleProgressLoad_left{
         0%{
            border-bottom:20px solid #ED1A1A;
            border-left:20px solid #ED1A1A;
            -webkit-transform: rotate(45deg);
         }
         50%{
            border-bottom:20px solid rgb(232, 232, 12);
            border-left:20px solid rgb(232, 232, 12);
            border-top:20px solid rgb(81, 197, 81);
            border-right:20px solid rgb(81, 197, 81);
            -webkit-transform: rotate(45deg);
         }
         100%{
            border-top:20px solid green;
            border-right:20px solid green;
            border-bottom:20px solid green;
            border-left:20px solid green;
            -webkit-transform: rotate(225deg);
         }
      }
   </style>
</head>
<body>
<div class="circleProgress_wrapper">
   <div class="wrapper right">
      <div class="circleProgress rightcircle"></div>
   </div>
   <div class="wrapper left">
      <div class="circleProgress leftcircle"></div>
   </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/janas-luo/p/9605587.html

原文地址：https://blog.csdn.net/weixin_33882452/article/details/94490935?ops_request_misc=&request_id=1ac74eafba2e4820abec456db5411370&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-27-94490935-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/01728f34ca7c42d9bcdf8bcbd0cc7312

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复