星空网 > 软件开发 > 网页设计

[css]我要用css画幅画

几年前开始就一直想用css画幅画。

今天才真正开始, 从简单的开始。

 

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

html如下:

[css]我要用css画幅画[css]我要用css画幅画
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>Css Paint</title> 6   <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9   <div class="sun">10     <div class="sun-body"></div>11     <div class="sun-shine-light sun-shine-light1"></div>12     <div class="sun-shine-light sun-shine-light2"></div>13     <div class="sun-shine-light sun-shine-light3"></div>14     <div class="sun-shine-light sun-shine-light4"></div>15     <div class="sun-shine-light sun-shine-light5"></div>16   </div>17 </body>18 </html>

View Code

 

css如下:

[css]我要用css画幅画[css]我要用css画幅画
 1 .sun{ 2   position: relative; 3 } 4  5 .sun-body{   6   background-color: red; 7   border-radius: 50%; 8   height: 300px; 9   left: -100px;10   position: absolute;11   top: -100px;12   width: 300px;13   z-index: 9;14 }15 .sun-shine-light{16   background-color: yellow;17   height: 5px;18   left:250px;19   margin-top:30px;20   position: relative;21   width: 300px;22   z-index:10;23 }24 .sun-shine-light1{25   -webkit-transform: rotate(-3deg);26   -moz-webkit-transform: rotate(-3deg);27   -ms-webkit-transform: rotate(-3deg);28   -o-webkit-transform: rotate(-3deg);29 }30 .sun-shine-light2{31   top: 70px;32   left: 240px;33   -webkit-transform: rotate(10deg);34   -moz-webkit-transform: rotate(10deg);35   -ms-webkit-transform: rotate(10deg);36   -o-webkit-transform: rotate(10deg);37 }38 .sun-shine-light3{39   top: 160px;40   left: 195px;41   -webkit-transform: rotate(30deg);42   -ms-transform: rotate(30deg);43   -o-transform: rotate(30deg);44   transform: rotate(30deg);45 }46 .sun-shine-light4{47   top: 215px;48   left: 85px;  49   width: 260px;50   -webkit-transform: rotate(55deg);51   -ms-transform: rotate(55deg);52   -o-transform: rotate(55deg);53   transform: rotate(55deg);54 }55 .sun-shine-light5{56   top: 200px;57   left: -50px;58   width: 230px;59   -webkit-transform: rotate(85deg);60   -ms-transform: rotate(85deg);61   -o-transform: rotate(85deg);62   transform: rotate(85deg);63 }

View Code

 

这里用到一个比较陌生的css属性: transform:rotate(Ndeg)  

作用是旋转,其中N为整数,表示旋转的角度。

 

今天就到这。以后继续。 谢谢观看。




原标题:[css]我要用css画幅画

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流