接着之前的[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. C# 设置word文档页面大小

    我们知道,在MS word中,默认的页面大小是letter(8.5’’x11’’),除此之外,word还提供了其他一些预定义的页面大小,如Legal (5.4’’x14’’),A3 (11.69’’x ...

  2. 学习Linux下s3c2440的USB鼠标驱动笔记

    1.ARM-Linux下USB驱动程序开发1.1.1.linux下USB配置:*********(MassStorage:存储设备)********************************** ...

  3. ASP.NET通过递归添加树(Treeview)

    先来看看效果,基本上就是这样的. 所谓树,无非就是2点,第一个:根节点,第二:叶子节点,其中叶子节点中还可能有叶子节点,但是根节点始终只有一个. 下面贴上 各部分的代码 1.PAGE_LOAD载入事件 ...

  4. android获得ImageView图片的等级

    android获得ImageView图片的等级问题 要实现的功能如下图,点击分享能显示选中与不选中状态,然后发送是根据状态来实现具体分享功能. 在gridview中有5个子项,每个子元素都有两张图片A ...

  5. OpenCV2:特征匹配及其优化

    在OpenCV2简单的特征匹配中对使用OpenCV2进行特征匹配的步骤做了一个简单的介绍,其匹配出的结果是非常粗糙的,在这篇文章中对使用OpenCV2进行匹配的细化做一个简单的总结.主要包括以下几个内 ...

  6. js赋值运算的理解

    简介 js引擎由于为了效率,很多时候的非直接量赋值都不是copy一份在赋值给新的变量,而是一个引用 ps:直接量:直接值数字字符串等 为什么使用len = doms.length; 里的len效率要比 ...

  7. listview控件及其与数据库的连接

    一.显示数据 1.视图 -----小三角--视图-Details,该选项最常用,选中之后会以表格样式呈现. 2.设置列头 ----右键--编辑列 --添加 先编辑列,再编辑项 编辑列右边的属性:Tex ...

  8. ActiveX（五）更好的“ActiveX”？

    前文中四篇随笔.已经可以实现 ActiveX 与 Js 无缝交互. 也就是说借用ActiveX实现更加强大的功能已经完全不是问题.但是.ActiveX 本身还有一个局限性——浏览器兼容问题.如此强大的 ...

  9. 【MVVM Light】新手初识MVVM，你一看就会

    一.前言 作为一个初入软件业的新手,各种设计模式与框架对我是眼花缭乱的.所以当我接触到这些新知识的时候就希望自己能总结几个步骤,以便更好更方便的在日常工作中进行使用. MVVM顾名思义就是Model- ...

  10. C#图片加水印实例与代码

    本文要提供的类可以为图片加文字水印,以及判断是否是图片文件.经过测试可运行,例子请下载:http://hovertree.com/h/bjaf/5qc5eh6y.htm 例子效果图: 以下是Hover ...