效果图:
使用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>