接着之前的[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. .Net中DataAdapter批量插入和更新数据总结

    前言 前段时间一直在忙着项目上线,在做项目的同时遇到了一些之前不曾碰到的问题,因为没有经验,只能从网上找一些相关的解决方案,但是网上提供的资料实在是太杂,有的根本不能用,耗时又耗力. 我希望把我这段时 ...

  2. 安装infer整个过程

    日期:2015-06-26 孟起  15:43:25 大神.. 孟起  15:43:38 我是不是照着这个安装 HelloWorld  15:45:05 直接找二进制文件安卓就行 孟起  15:46: ...

  3. hibernate笔记--缓存机制之 一级缓存(session缓存)

    一级缓存: 又称为session缓存,它和session生命周期相同,周期非常短.是事务级别的缓存: 还是以Book和Category这两个表为例,我们用代码观察一个缓存的存在: 假设现在我要去查询i ...

  4. （1）从底层设计，探讨插件式GIS框架的实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 研一时,听当时的师兄推荐,买了蒋波涛的一本关于GIS插件框架的书.当时 ...

  5. PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）

    说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...

  6. Web.Config文件配置小记

    <system.web>  <!--             设置 compilation debug="true" 将调试符号插入            已编译 ...

  7. Mybatis 入门 -- 最简单的引入和使用

    参考:http://www.mybatis.org/mybatis-3/zh/getting-started.html 从今天开始学习官方文档. 1.项目搭建 项目结构: 首先,搭建一个maven项目 ...

  8. 【十大经典数据挖掘算法】Naïve Bayes

    [十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 朴素贝叶斯(Naïve Bayes) ...

  9. JavaScript进阶之this

    javascript的this,一个不知道究竟属于谁的东西 this是一个大利器,用好了就可以帮我们省掉很多事,然而事实上却总是让我们出错.自己就吃过很大的亏.现在咱们就来扒一扒this究竟是什么. ...

  10. visual studio 2015 开发android

    转载请注明: http://www.cnblogs.com/sunyl/p/5493249.html http://www.cnblogs.com/sunyl/ 最近有不少新闻, 甲骨文向谷歌索赔93 ...