[css]我要用css画幅画(四)

接着之前的[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</title>
 6     <link rel="stylesheet" type="text/css" href="../css/sun.css" />
 7     <link rel="stylesheet" type="text/css" href="../css/house.css" />
 8     <link rel="stylesheet" type="text/css" href="../css/human.css" />
 9     <link rel="stylesheet" type="text/css" href="../css/cloud.css" />
10 </head>
11 <body>
12     <div class="sun">
13         <div class="sun-body"></div>
14         <div class="sun-shine-light sun-shine-light1"></div>
15         <div class="sun-shine-light sun-shine-light2"></div>
16         <div class="sun-shine-light sun-shine-light3"></div>
17         <div class="sun-shine-light sun-shine-light4"></div>
18         <div class="sun-shine-light sun-shine-light5"></div>
19     </div>
20
21     <div class="house-width house">
22         <div class="house-width house-roof house-roof-left"></div>
23         <div class="house-width house-roof house-roof-right"></div>
24         <div class="house-width house-wall">
25
26             <div class="house-wall-door">
27
28                 <div class="house-wall-door-handle"></div>
29             </div>
30         </div>
31     </div>
32
33     <div class="human human-pos-1">
34         <p class="lines">大家好，我叫小明</p>
35         <div class="human-head-normal"></div>
36         <div class="human-body-normal"></div>
37         <div class="human-arms-normal"></div>
38         <div class="human-legs-normal"></div>
39     </div>
40
41     <div class="human human-pos-2">
42         <p class="lines">大家好，我叫静静</p>
43         <div class="human-head-normal"></div>
44         <div class="human-body-normal"></div>
45         <div class="human-arms-normal"></div>
46         <div class="human-legs-1"></div>
47     </div>
48
49     <div class="cloud cloud-pos cloud-pos-1">
50         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
51         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
52         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
53         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
54     </div>
55     <div class="cloud cloud-pos cloud-pos-2">
56         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
57         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
58         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
59         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
60     </div>
61
62
63 </body>
64 </html>

Html

本次对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 }

human.css改动

云的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 }

cloud.css

这里并没有用到什么陌生的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看起来效果更好，可以留言告诉我，我再加回去。

转载于:https://www.cnblogs.com/bee0060/p/4970436.html

[css]我要用css画幅画(四)相关推荐

[css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
css4个伪元素,CSS_CSS3中的content属性使用示例，CSS中主要的伪元素有四个：befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
python 生成excel像素画_【译】只用 CSS 就能做到的像素画/像素动画
只用 CSS 就能做到的像素画/像素动画这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法.虽说纯 CSS 就能做到,但是为了更高的可维护性,也会顺便介绍使用 Sass 的制作方法. 上面 ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
四年级上计算机教案简简单单画幅画,《简简单单画幅画》教学设计
<简简单单画幅画>教学设计 [教学目标] 知识与技能:1.学生学会使用"画图"软件. 2.认识"画图"窗口的基本组成. 3.会在计算机中画简单的图画 ...
【转载】只用 CSS 就能做到的像素画/像素动画
[转载]只用 CSS 就能做到的像素画/像素动画如图: 原文链接:box-shadowを使ってCSSだけでドット絵を描き.アニメーションさせる作者推特:bc_rikko 作者的推特里面有不少例子, ...
简述css属性选择器的几种定义方式_css的四种使用方式 css规则按选择器类型分为那四种...
HTML中嵌入CSS的四种方式及优先级,如何选择 1. 行内样式行内样式就是把 CSS 样式直接放在代码行内的标签中,一般都是放入标签的style属性中,由于行内样式直接插入标签中,故是最直接的一种方 ...
精通CSS.DIV网页样式与布局（四） ——页面背景
咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,他直接决定了整个网页的风格和色调.我们这回主要来学习如何用CSS来设置背景颜色.背景图片. 背景颜色:CSS设置背景颜 ...
css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

[css]我要用css画幅画(四)

[css]我要用css画幅画(四)相关推荐

最新文章

热门文章