接着之前的[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如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Css Paint</title>

     <link rel="stylesheet" type="text/css" href="../css/sun.css" />

     <link rel="stylesheet" type="text/css" href="../css/house.css" />

     <link rel="stylesheet" type="text/css" href="../css/human.css" />

     <link rel="stylesheet" type="text/css" href="../css/cloud.css" />

 </head>

 <body>

     <div class="sun">

         <div class="sun-body"></div>

         <div class="sun-shine-light sun-shine-light1"></div>

         <div class="sun-shine-light sun-shine-light2"></div>

         <div class="sun-shine-light sun-shine-light3"></div>

         <div class="sun-shine-light sun-shine-light4"></div>

         <div class="sun-shine-light sun-shine-light5"></div>

     </div>

     <div class="house-width house">

         <div class="house-width house-roof house-roof-left"></div>

         <div class="house-width house-roof house-roof-right"></div>

         <div class="house-width house-wall">

             <div class="house-wall-door">

                 <div class="house-wall-door-handle"></div>

             </div>

         </div>

     </div>

     <div class="human human-pos-1">

         <p class="lines">大家好，我叫小明</p>

         <div class="human-head-normal"></div>

         <div class="human-body-normal"></div>

         <div class="human-arms-normal"></div>

         <div class="human-legs-normal"></div>

     </div>

     <div class="human human-pos-2">

         <p class="lines">大家好，我叫静静</p>

         <div class="human-head-normal"></div>

         <div class="human-body-normal"></div>

         <div class="human-arms-normal"></div>

         <div class="human-legs-1"></div>

     </div>

     <div class="cloud cloud-pos cloud-pos-1">

         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>

     </div>

     <div class="cloud cloud-pos cloud-pos-2">

         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>

     </div>

 </body>

 </html>

Html

本次对human.css做了一些改动，主要增加了如下内容：

 .human-pos-1 {

     left: 250px;

     bottom: 25px;

 }

 .human-pos-2 {

     left: 40px;

     bottom: 60px;

 }

 .human-legs-1 {

     border: 3px solid #000;

     border-bottom: none;

     border-right: none;

     height:50px;

     left: 55px;

     position: absolute;

     top: 120px;

     width: 50px;

     -webkit-transform: rotate(-2deg);

     -webkit-transform-origin: 1px 1px;

 }

human.css改动

云的css如下：

 .cloud{

     height: 150px;

     width: 250px;

 }

 .cloud-pos {

     position: absolute;

 }

 .cloud-pos-1 {

     left: 35%;

     top: 25px;

 }

 .cloud-pos-2 {

     left: 60%;

     top: 25px;

 }

 .cloud-bg {

     background-color: skyBlue;

 }

 .cloud-border {

     border: 2px solid #000;

 }

 .cloud-top {

     border-radius: 100%;

     border-width: 0px;

     height: 100px;

     left: 50%;

     margin-left:-75px;

     width: 150px;

 }

 .cloud-left {

     border-radius: 100%;

     border-width: 0px;

     height: 100px;

     margin-top: -50px;

     top: 60%;

     width: 100px;

 }

 .cloud-right {

     border-radius: 100%;

     border-width: 0px;

     height: 100px;

     margin-top: -50px;

     right:;

     top: 60%;

     width: 100px;

 }

 .cloud-bottom {

     border-radius: 100%;

     border-width: 0px;

     height: 100px;

     left:53%;

     margin-left: -75px;

     margin-top: -50px;

     top: 65%;

     width: 150px;

 }

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看起来效果更好，可以留言告诉我，我再加回去。

[css]我要用css画幅画(四)的更多相关文章

  1. [css]我要用css画幅画(五)

    接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...

  2. [css]我要用css画幅画(三)

    接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...

  3. [css]我要用css画幅画(六)

    接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...

  4. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  5. [css]我要用css画幅画(八) - Hello Kitty

    接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...

  6. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  7. [css]我要用css画幅画(二)

    接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...

  8. [css]我要用css画幅画(一)

    几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...

  9. 【CSS学习笔记】a标签的四种伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. Objective-C精选字符串处理方法

    无论是什么编程语言对字符串的操作是少不了的,对复杂的字符串的分析和操作我们可以用正则表达式来达到我们的目的.简单的字符串处理我们可以借助OC中NSString封装好的字符串处理方法,不过前提是你得了解 ...

  2. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

  3. linux源码分析（三）－start_kernel

    前置:这里使用的linux版本是4.8,x86体系. start_kernel是过了引导阶段,进入到了内核启动阶段的入口.函数在init/main.c中. set_task_stack_end_mag ...

  4. Xamarin.Android和UWP之MVVM的简单使用(一)

    0x01 前言 就目前而言,MVVM可以说是挺流行的,无论是web端还是移动端,web端的主要代表angularjs,avalonjs等, 移动端(xamarin,uwp)的代表应该是mvvmligh ...

  5. 设计模式（三）工厂方法模式（Factory Pattern）

    一.引言 在简单工厂模式中讲到简单工厂模式的缺点,有一点是——简单工厂模式系统难以扩展,一旦添加新产品就不得不修改简单工厂方法,这样就会造成简单工厂的实现逻辑过于复杂,然而本专题介绍的工厂方法模式可以 ...

  6. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  7. C#编程总结--总目录

    C#编程总结--总目录 多年的C#实战经历,希望通过一个系列课程对C#编程做系统总结. 总结过去,展望未来.新的一年,新的征程,新的开始! 希望我们在2014梦想成真,马到成功! 1.C#编程总结(一 ...

  8. SQL SERVER 的模糊查询 LIKE

    今天写个动态脚本,需要把数据库里面包含“USER_"的表删除掉,突然想不起来如何搜索通配字符了,赶紧查查MSDN,整理了下模糊查询的知识点,留着以后查阅用. LIKE模糊查询的通配符 通配符 ...

  9. 谈一谈.net析构函数对垃圾回收的影响

    之前忘了说了 代码都是在Release模式下运行的,现在补充上. 这里说析构函数,其实并不准确,应该叫Finalize函数,Finalize函数形式上和c++的析构函数很像 ,都是(~ClassNam ...

  10. C#代码精确到毫秒时间戳写法

                 TimeSpan ts = new TimeSpan(DateTime.Now.Ticks);            ts.TotalMilliseconds;