CSS3----画圆,渐变,旋转

效果图：

 

使用border-radius，你可以画出各种漂亮的圆形图案

CSS

 

.circle {
    border-radius: 50%;
    display: inline-block;
    margin-right: 20px;
}

#circle1 {
    width: 200px;
    height: 200px;
    background: green;
}

#circle2 {
    width: 125px;
    height: 125px;
    background: red;
}

#circle3 {
    width: 100px;
    height: 100px;
    background: blue;
    position: relative;
}

#circle4 {
    width: 80px;
    height: 80px;
    background: orange;
    position: absolute;
    top: 10%;
    left: 10%;
    display: block;
}

#circle5 {
    width: 60px;
    height: 60px;
    background: white;
    position: absolute;
    top: 13%;
    left: 13%;
    display: block;
}

/*旋转*/
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}

/*渐变色效果的圆形图案*/
#advanced {
    width: 200px;
    height: 200px;
    
    background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
    background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange,red);
    background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
    
    
    /* webkit chrome, safari, mobile */
        -webkit-animation-name: spin; 
        -webkit-animation-duration: 3s; /* 3 seconds */
        -webkit-animation-iteration-count: infinite;   /*1：1圈*/
        -webkit-animation-timing-function: linear;

        /* mozilla ff */
        -moz-animation-name: spin; 
        -moz-animation-duration: 3s; /* 3 seconds */
        -moz-animation-iteration-count: infinite;    <span style="font-family: Arial, Helvetica, sans-serif;">/*1： 1圈*/</span>

        -moz-animation-timing-function: linear;

        /* microsoft ie */
        -ms-animation-name: spin; 
        -ms-animation-duration: 3s; /* 3 seconds */ 
        -ms-animation-iteration-count: infinite;  <span style="font-family: Arial, Helvetica, sans-serif;">/*1：1圈*/</span>
        -ms-animation-timing-function: linear;
}

HTML

 

 

<h2>基本圆形</h2>
<div id="circle1" class="circle lazy "></div>
<div id="circle2" class="circle lazy "></div>
<div id="circle3" class="circle lazy ">
    <div id="circle4" class="circle lazy ">  <!--内圆-->
        <div id="circle5" class="circle lazy "></div> <!--内圆-->
    </div>   
</div>

<h2>旋转，渐变色效果的圆形图案</h2>
<div id="advanced" class="circle lazy "></div>