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>

 

效果如下:

 

 

更多:

Css3 Form表单布局处理,Input布局处理 

CSS3网页布局之文字布局和文字超出处理 

Css 实现半圆进度条展示功能 

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2022 CODEPRJ.COM