css实现圆与边框旋转动画的案例

发布时间:2020-10-22 15:39:27 作者:小新
来源:亿速云 阅读:624

小编给大家分享一下css实现圆与边框旋转动画的案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

实现效果:

css实现圆与边框旋转动画的案例

代码

html:
<div id="box">
    <div class="circle-out">
        <div class="circle-inner"> </div>
    </div>
    <div class="circle-part">
    </div>
    <div class="part1">
    </div>
</div>
css:
     #box {
        height:200px;
        width:200px;
    }

    .circle-out{
        height: inherit;
        width: inherit;

        display: inline-block;
        text-align: center;

        border: 20px solid blue;
        border-radius: 50%;
        
    }

    /* 绘制弧形 */
    .circle-part{
        display: inline-block;
        position: relative;
        width:0px;
        height: 0px;

        border-radius: 50%;
        border: 100px solid #0000ff05;
        border-top: 100px solid blue;

        top: -220px;
        left: 20px;

        transform: rotate(0deg);
        animation: run-part 5s infinite;
    }

    .part1{
        height: 0px;
        width: 0px;

        border-radius: 50%;
        border:100px solid #fafafa;
        border-top: 100px solid #ff000000;

        position: relative;
        top: -420px;
        left: 20px;

        transform: rotate(45deg);
        animation: run-part1 5s infinite;
    }

    .circle-inner{
        height: 0px;
        width: 0px;
        display: inline-block;

        border-radius: 50%;
        border: 20px solid blue;

        top: 80px;
        position: relative;
        
        z-index: 1000;
    }

    @-webkit-keyframes run-part1{
        0%{
            transform: rotate(45deg);
        }

        100% {
            transform: rotate(405deg);
        }
    }

    @-webkit-keyframes run-part{
        0%{
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

实现思路

1 图形构成

从外观看到,该图形大致由:外圆,内圆及构扇形构成。

1.1 外圆

在本示例中,主要采用一个p,设置高与宽,背景不设置或白色。设置 border-radius为50%外圆圈,使用边框构成从而形成外圈。

.circle-out{
    height: inherit;
    width: inherit;
    border: 20px solid blue;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
}

效果图

css实现圆与边框旋转动画的案例

1.2内圆

内圆很简单,也是使用border完成的圆,设置boder-radius:50%实现的圆的效果,最后就是一个定位的事情。

1.3扇形

扇形,在本示例中,实现的思路也是拼凑,外加旋转,利用边框border实现。

  .circle-part{
        //(1)
        display: inline-block;
        width:0px;
        height: 0px;

        //(2)
        border-radius: 50%;
        border: 100px solid #0000ff05;
        border-top: 100px solid blue;
        
        //(3)
        position: relative;
        top: -220px;
        left: 20px;

        //(4)
        transform: rotate(0deg);
        animation: run-part 5s infinite;
    }

如上代码:
分为(1)、(2)、(3)、(4)部分,出去固定形状、动画外,比较重要的就在于(2)部分。

先绘制出1/4的圆(边框)。其他另外3/4的扇形以透明绘制。

相同的,另外使用另外一个圆进行相同的处理,这样两个圆就能重叠在一起,唯一不同的是:第二个圆设置那3/4圆作为白色,1/4设置为透明色。

这时,呈现的为1/4的扇形,背景为blue,而因为透明的原因1/4是完全暴露的。

最后,由于最后的圆为顶层元素,所以当顶层元素发生旋转时,蓝色的扇形部分就会被顶层元素那3/4的扇形区域所遮蔽。从而达到最后的效果。

代码最后加上自己的动画,实现最后的效果。

以上是css实现圆与边框旋转动画的案例的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. CSS旋转动画如何实现
  2. css实现边框阴影

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3 画的

上一篇:云服务器怎么样连接

下一篇:有支持多ip的云服务器吗

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》