用CSS画太阳-描绘我们的世界
.sun{
position: relative;
}
.sun-body{
background-color: red;
border-radius: 50%;
height: 300px;
left: -100px;
position: static;
top: -100px;
width: 300px;
z-index: 9;
}
.sun-shine-light{
background-color: yellow;
height: 5px;
left:250px;
margin-top:30px;
position: relative;
width: 300px;
z-index:10;
}
.sun-shine-light1{
-webkit-transform: rotate(-3deg);
-moz-webkit-transform: rotate(-3deg);
-ms-webkit-transform: rotate(-3deg);
-o-webkit-transform: rotate(-3deg);
}
.sun-shine-light2{
top: 70px;
left: 240px;
-webkit-transform: rotate(10deg);
-moz-webkit-transform: rotate(10deg);
-ms-webkit-transform: rotate(10deg);
-o-webkit-transform: rotate(10deg);
}
.sun-shine-light3{
top: 160px;
left: 195px;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.sun-shine-light4{
top: 215px;
left: 85px;
width: 260px;
-webkit-transform: rotate(55deg);
-ms-transform: rotate(55deg);
-o-transform: rotate(55deg);
transform: rotate(55deg);
}
.sun-shine-light5{
top: 200px;
left: -50px;
width: 230px;
-webkit-transform: rotate(85deg);
-ms-transform: rotate(85deg);
-o-transform: rotate(85deg);
transform: rotate(85deg);
}
这样子我们就用CSS画出一个漂亮的太阳来了,程序猿的世界也是美好的。
下一篇:没有信息