CSS3制作圆形翻转进展㊑条动漫的实例

日期：2021-01-21 类型：科技新闻我要分享

关键词：在线网页制作，建网页，个人简介网页制作，简单网页，建立网页

主题

今日从零教大伙儿用CSS3制作圆形翻转进展条动漫，想不容易都难！那麼，究竟是啥东西呢？先不慌，以前我共享了一个css完成进展条实际效果的blog《CSS完成进展条和定单进展条》，可是呢，那篇blog仅仅制做出来实际效果罢了，并沒有动漫实际效果，由于那时候正期终备考期内，因此就省了制作动漫的時间成本费。因此，今日就一起把各种各样实际效果都完成吧！

内容

首先看一下实际效果图，会提高大家的学习培训兴趣爱好哟：

好的，我将依照此图从上到下的次序解读，因为第一和第二种实际效果之气那篇blog《CSS完成进展条和定单进展条》早已详细介绍过如何做的了，这儿就把重心点放到动漫上边，针对圆形实际效果是关键，我将详尽解读。

第一种实际效果：

html构造：

<div id="progress">
      <span></span>
</div>

css款式：

#progress{
            width: 50%;
            height: 30px;
            border:1px solid #ccc;
            border-radius: 15px;
            margin: 50px 0 0 100px;
            overflow: hidden;
            box-shadow: 0 0 5px 0px #ddd inset;
        }
        #progress span {
            display: inline-block;
            width: 100%;
            height: 100%;
            background: #2989d8; /* Old browsers */
            background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
            background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */
            background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */
            background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
            background-size: 60px 30px;
            text-align: center;
            color:#fff;
            -webkit-animation:load 3s ease-in;
        }
        @-webkit-keyframes load{
            0%{
                width: 0%;
            }
            100%{
                width:100%;
            }
        }

能看到实际上这类进展条的动漫是最非常容易完成的，依据实际进展百分数设定默认设置的width百分数和动漫里100%处的width百分数就可以了了，例如说，我觉得完成70%的进展条动漫实际效果，那麼我只必须改动一下多处地区：

#progress span{
    width: 70%;
}
@-webkit-keyframes load{
      0%{
        width: 0%;
      }
    100%{
        width:70%;
      }
}

第二种实际效果：

html构造：

<div id="progressBar">
      <!-- 进展条 -->
      <div>
        <span></span>
      </div>
      <!-- 五个圆 -->
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
 </div>

css款式：

#progressBar{
            width: 80%;
            height: 50px;
            position: relative;
            margin: 50px 0 0 100px;
        }
        #progressBar div{
            width: 100%;
            height: 10px;
            position: absolute;
            top:50%;
            left: 0;
            margin-top:-20px;
            background: #ccc;
        }
        #progressBar div span{
            position: absolute;
            display: inline-block;
            background: green;
            height: 10px;
            width: 100%;
            -webkit-animation:bgLoad 5.5s linear;
        }
        @-webkit-keyframes bgLoad{
            0%{
                width: 0%;
            }
            18.18%,27.27%{
                width:25%;
            }
            45.45%,54.54%{
                width: 50%;
            }
            72.72%,81.81%{
                width: 75%;
            }
            100%{
                width:100%;
            }
        }
        #progressBar>span{
            position: absolute;
            top:0;
            margin-top: -10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
            margin-left: -20px;
            color:#fff;
        }
        @-webkit-keyframes circleLoad_1{
            0%,66.66%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_2{
            0%,83.34%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_3{
            0%,88.88%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        @-webkit-keyframes circleLoad_4{
            0%,91.67%{
                background: #ccc;
            }
            100%{
                background:green;
            }
        }
        #progressBar span:nth-child(2){
            left: 0%;background:green;
        }
        #progressBar span:nth-child(3){
            left: 25%;background:green;
            -webkit-animation:circleLoad_1 1.5s ease-in;
        }
        #progressBar span:nth-child(4){
            left: 50%;background:green;
            -webkit-animation:circleLoad_2 3s ease-in;
        }
        #progressBar span:nth-child(5){
            left: 75%;background:green;
            -webkit-animation:circleLoad_3 4.5s ease-in;
        }
        #progressBar span:nth-child(6){
            left: 100%;background:green;
            -webkit-animation:circleLoad_4 6s ease-in;
        }

能看到，实际上针对动漫自身是非常简单的，一看就搞清楚了，关键便是动漫不断時间的测算，因为这一动漫实际效果只实行一次，因此实际上还可以用动漫延迟时间時间来确保每个动漫在特定的時间点刚开始实行，可是针对循环系统或是数次动漫实际效果，延迟时间很不灵便，因此这儿還是用不断時间的长度来操纵动漫的实行時间。

这一定单进展条，我是设定了走一段用时一秒，随后每到一个圆点就间断0.5秒，而这0.5秒便是相对性应的圆点的动漫不断实行時间。可是再度注重这一是一次动漫，假如想完成循环系统动漫，還是得做调节的，务必让全部动漫的不断实行時间是一样的，要不然循环系统起來就紊乱的。而時间的修改也会危害动漫重要帧的修改，下边对第一小段和第二个圆的动漫時间解读一下：

最先，长细条的动漫不断時间根据测算：

4小段x一秒 + 正中间3个圆点 x 0.5秒 = 5.5秒

接下去便是测算长细条动漫重要帧的時间分派，设每一份0.5秒，那麼共总便是11份，每小段得2份，每一个圆点得1份，用100%除以11，可得每份大概是9.09%，接下去便是分派時间了，这一就简易了，很少说。

然后，当长细条进行第一小段的动漫实际效果抵达第二个圆点时，会间断0.5秒，而这0.5秒便是第二个圆点的动漫時间，因此第二个圆点的动漫不断時间便是：

等候长细条实行完1小段 x１秒＋本身的动漫进行時间ｘ０.５秒＝１.５秒

一样的方式测算每一份的時间随后开展分派。同样，别的动漫实际效果类似，也不再过多阐释了。

第三种实际效果：

今日就关键解读这一实际效果，最先，当有些人说你可以不可以做一个圆形进展条实际效果出去时，假如是静态数据详细圆形进展条，那麼就非常简单了：

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-radius: 50%;
}

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-left:20px solid transparent;
    border-bottom:20px solid transparent;
    border-radius: 50%;
}

随后還是要说，这一都不难啦。但是，假如并不是恰好全是45度的倍率呢？

OK，大家先设定一个200x200的方块，随后大家在这里里边进行大家的实际效果：

.circleProgress_wrapper{
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
    border:1px solid #ddd;
}

接下去我将在这里个器皿里再放2个矩形框，每一个矩形框都占一半：

<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>

.wrapper{
    width: 100px;
    height: 200px;
    position: absolute;
    top:0;
    overflow: hidden;
}
.right{
    right:0;
}
.left{
    left:0;
}

这儿关键说一下.wrapper 的overflow:hidden; 起着重要性功效。这2个矩形框都设定了外溢掩藏，那麼当我们们去转动矩形框里边的圆形的情况下，外溢一部分就被掩藏没了，那样大家便可以做到大家要想的实际效果。

从html构造也已见到，在上下矩形框里边还会继续各有有一个圆形，先讲一下右半圆：

.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
}
.rightcircle{
    border-top:20px solid green;
    border-right:20px solid green;
    right:0;
}

能看到，实际效果早已出去了，实际上原本是一个半圆弧，但因为大家设定了上面框和右侧框，因此上面框有一半外溢而被掩藏了，因此大家能够根据转动足以复原：

.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    -webkit-transform: rotate(45deg);
}

因此要是转动自身要想的视角便可以完成随意占比的进展条。接下去把左半圆弧也完成，变为一个全圆：

.leftcircle{
    border-bottom:20px solid green;
    border-left:20px solid green;
    left:0;
}

随后，便是让它动一动，基本原理是那样的，先让右半圆弧转动180度，再让左半圆弧转动180度，那样，2个半圆弧因为依次都所有外溢而消退了，因此看上去便是进展条再翻转的实际效果：

.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%{
                -webkit-transform: rotate(45deg);
            }
            50%,100%{
                -webkit-transform: rotate(225deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%,50%{
                -webkit-transform: rotate(45deg);
            }
            100%{
                -webkit-transform: rotate(225deg);
            }
        }

自然，大家只必须调节一下视角便可以完成反方向的实际效果：

.circleProgress{
            width: 160px;
            height: 160px;
            border:20px solid transparent;
            border-radius: 50%;
            position: absolute;
            top:0;
            -webkit-transform: rotate(-135deg);
        }
        @-webkit-keyframes circleProgressLoad_right{
            0%{
                -webkit-transform: rotate(-135deg);
            }
            50%,100%{
                -webkit-transform: rotate(45deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%,50%{
                -webkit-transform: rotate(-135deg);
            }
            100%{
                -webkit-transform: rotate(45deg);
            }
        }

好的，接下去便是冲向最后实际效果了，如同大家一刚开始见到的那般，有点儿像大家应用360卫士清除废弃物时的相近实际效果，自然并不是很像啦：

.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);
            }
        }

能看到，实际上便是多了一些更改不一样外框色调的动漫罢了，这一就给大伙儿自身去实践活动吧！关键還是运用2个矩形框来进行那么一个圆形进展条实际效果，非常留意overflow这条标准，起着重要功效。

全文连接：https://www.cnblogs.com/jr1993/p/4677921.html

之上便是CSS3制作圆形翻转进展条动漫的实例的详尽內容，大量有关css3制作进展条的材料请关心脚本制作之家其他有关文章内容！

上一篇：HTML5播发⊙ω⊙完成rtmp流直播间返回下一篇：没有了