[css]我要用css画幅画(四)_html/css_WEB-ITnose
程序员文章站
2022-04-11 23:14:01
...
接着之前的[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-4.html
完整html如下:
1 2 3 4 5Css Paint 6 7 8 9 10 11 1213 14 15 16 17 18 1920 2122 23 2432 3325 263127 28 29303440 41大家好,我叫小明
35 36 37 38 394248 49大家好,我叫静静
43 44 45 46 4750 51 52 53 545556 57 58 59 6061 62 63 64
本次对human.css做了一些改动,主要增加了如下内容:
1 .human-pos-1 { 2 left: 250px; 3 bottom: 25px; 4 } 5 6 .human-pos-2 { 7 left: 40px; 8 bottom: 60px; 9 }10 11 .human-legs-1 {12 border: 3px solid #000;13 border-bottom: none;14 border-right: none;15 height:50px;16 left: 55px;17 position: absolute;18 top: 120px;19 width: 50px;20 21 -webkit-transform: rotate(-2deg);22 -webkit-transform-origin: 1px 1px;23 }
云的css如下:
1 .cloud{ 2 height: 150px; 3 width: 250px; 4 } 5 6 .cloud-pos { 7 position: absolute; 8 } 9 10 .cloud-pos-1 {11 left: 35%;12 top: 25px;13 }14 15 .cloud-pos-2 {16 left: 60%;17 top: 25px;18 }19 20 .cloud-bg {21 background-color: skyBlue;22 }23 24 .cloud-border {25 border: 2px solid #000;26 }27 28 .cloud-top {29 border-radius: 100%;30 border-width: 0px;31 height: 100px;32 left: 50%;33 margin-left:-75px;34 width: 150px;35 }36 37 .cloud-left {38 border-radius: 100%;39 border-width: 0px; 40 height: 100px;41 margin-top: -50px;42 top: 60%;43 width: 100px;44 }45 46 .cloud-right { 47 border-radius: 100%;48 border-width: 0px; 49 height: 100px;50 margin-top: -50px;51 right:0;52 top: 60%;53 width: 100px;54 }55 .cloud-bottom { 56 border-radius: 100%;57 border-width: 0px; 58 height: 100px;59 left:53%;60 margin-left: -75px;61 margin-top: -50px;62 top: 65%;63 width: 150px;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看起来效果更好,可以留言告诉我,我再加回去。
推荐阅读
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
谁用html5 canvas画过五角星啊_html/css_WEB-ITnose
-
为什么我的div与父div之间有距离?_html/css_WEB-ITnose
-
关于用图片做无序列表的项目符号,我做出来怎么是这个样子?_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
我的 Webpack 套装_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
帮我看一下我的网站字符编码设置的对吗_html/css_WEB-ITnose
-
【紧急】我想问一下HTML的TITLE标签,里面的内容能填写多少个?有限制吗_html/css_WEB-ITnose
-
帮我看一下我的网站字符编码设置的对吗_html/css_WEB-ITnose