良好的知名度和信誉度,经验丰富的团队!

多年来我们为不同行业的知名企业进行了网络品牌重塑,一路的学习、摸索、沉淀、创新,让我们更自信和充满活力。
提升客户品牌形象、实现客户的商业目标是亿络永恒的追求!

详细内容
当前位置:首页 > 新闻资讯 > 网页设计与策划

用CSS画太阳-描绘我们的世界

标签:  来源:  发布时间:2015-11-04 11:14:16

作为一个工作压力那么大的程序员,我首先要画一个太阳。

先看看我们的HTML代码如下:




Css Paint












再看看Style.css文件代码
.sun{
position: relative;
}

.sun-body{
background-color: red;
border-radius: 50%;
height: 300px;
left: -100px;
position: absolute;
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画出一个漂亮的太阳来了,程序猿的世界也是美好的。

分享到:
上一篇:服务业网站业务特征分析
下一篇:没有信息
业务咨询
点击这里给我发消息
业务咨询
点击这里给我发消息
技术支持
点击这里给我发消息