接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静。
github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-4.html和相关的css中可以找到
demo: http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-4.html
完整html如下:
1 <!DOCTYPE html> 2 <html lang="en" 3 head 4 meta charset="UTF-8" 5 title>Css Paint</ 6 link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 ="../css/house.css" 8 ="../css/human.css" 9 ="../css/cloud.css" 10 11 body12 div class="sun"13 ="sun-body"></div14 ="sun-shine-light sun-shine-light1"15 ="sun-shine-light sun-shine-light2"16 ="sun-shine-light sun-shine-light3"17 ="sun-shine-light sun-shine-light4"18 ="sun-shine-light sun-shine-light5"19 20 21 ="house-width house"22 ="house-width house-roof house-roof-left"23 ="house-width house-roof house-roof-right"24 ="house-width house-wall"25 26 ="house-wall-door"27 28 ="house-wall-door-handle"29 30 31 32 33 ="human human-pos-1"34 p ="lines">大家好,我叫小明p35 ="human-head-normal"36 ="human-body-normal"37 ="human-arms-normal"38 ="human-legs-normal"39 40 41 ="human human-pos-2"42 >大家好,我叫静静43 44 45 46 ="human-legs-1"47 48 49 ="cloud cloud-pos cloud-pos-1"50 ="cloud-pos cloud-border cloud-bg cloud-top"51 ="cloud-pos cloud-border cloud-bg cloud-left"52 ="cloud-pos cloud-border cloud-bg cloud-right"53 ="cloud-pos cloud-border cloud-bg cloud-bottom"54 55 ="cloud cloud-pos cloud-pos-2"56 57 58 59 60 61 62 63 64 html>
本次对human.css做了一些改动,主要增加了如下内容:
1 .human-pos-1 { 2 left: 250px; 3 bottom: 25px; 4 } 5 6 .human-pos-2 { 7 40px; 8 60px; 9 } 10 11 .human-legs-1 { 12 border: 3px solid #000; 13 border-bottom: none; 14 border-right:15 height:50px; 16 55px; 17 position: absolute; 18 top: 120px; 19 width: 50px; 20 21 -webkit-transform: rotate(-2deg); 22 -webkit-transform-origin: 1px 1px; 23 }
云的css如下:
.cloud{ 150px; .cloud-pos { 8 } 9 10 .cloud-pos-1 { 11 35%; 13 } 14 15 .cloud-pos-2 { 60%; 18 } 19 20 .cloud-bg { background-color: skyBlue; 22 } 23 24 .cloud-border { 25 2px solid #000; 26 } 27 28 .cloud-top { 29 border-radius: 100%; 30 border-width: 0px; 31 100px; 32 50%; 33 margin-left:-75px; 34 35 } 36 37 .cloud-left { 38 39 0px; 40 41 margin-top: -50px; 42 43 44 } 45 46 .cloud-right { 47 48 49 50 51 right:0; 52 53 54 } 55 .cloud-bottom { 56 57 58 59 53%; 60 -75px; 61 62 65%; 63 64 }
这里并没有用到什么陌生的css,一个发现是,原来还有skyBlue这个颜色。
这里的云是由四个形状不一的圆组成, 主要用了圆角属性和位置属性。
在画完后,也特意查了以下MDN中border-radius的详细介绍,加深了解,这里奉上MDN的文档链接(内容较多,再转述觉得多余,也担心造成误导,直接看文档可能更好):
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
非常详细,发现自己以前用的还是比较浅的。
今天就到这,谢谢观看。 如有错误,欢迎指正。
PS: 这次去掉了code pen的demo,因为code pen每次都要把多个css文件中的代码逐个复制进去,比较麻烦。 但如果看官觉得有code pen看起来效果更好,可以留言告诉我,我再加回去。