几年前开始就一直想用css画幅画。

今天才真正开始， 从简单的开始。

作为一个工作压力那么大的程序员，我首先要画一个太阳。

html如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Css Paint</title>

     <link rel="stylesheet" type="text/css" href="css/style.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>

 </body>

 </html>

css如下：

 .sun{

     position: relative;

 }

 .sun-body{

     background-color: red;

     border-radius: 50%;

     height: 300px;

     left: -100px;

     position: absolute;

     top: -100px;

     width: 300px;

     z-index:;

 }

 .sun-shine-light{

     background-color: yellow;

     height: 5px;

     left:250px;

     margin-top:30px;

     position: relative;

     width: 300px;

     z-index:;

 }

 .sun-shine-light1{

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

     -moz-webkit-transform: rotate(-3deg);

     -ms-webkit-transform: rotate(-3deg);

     -o-webkit-transform: rotate(-3deg);

 }

 .sun-shine-light2{

     top: 70px;

     left: 240px;

     -webkit-transform: rotate(10deg);

     -moz-webkit-transform: rotate(10deg);

     -ms-webkit-transform: rotate(10deg);

     -o-webkit-transform: rotate(10deg);

 }

 .sun-shine-light3{

     top: 160px;

     left: 195px;

     -webkit-transform: rotate(30deg);

     -ms-transform: rotate(30deg);

     -o-transform: rotate(30deg);

     transform: rotate(30deg);

 }

 .sun-shine-light4{

     top: 215px;

     left: 85px;

     width: 260px;

     -webkit-transform: rotate(55deg);

     -ms-transform: rotate(55deg);

     -o-transform: rotate(55deg);

     transform: rotate(55deg);

 }

 .sun-shine-light5{

     top: 200px;

     left: -50px;

     width: 230px;

     -webkit-transform: rotate(85deg);

     -ms-transform: rotate(85deg);

     -o-transform: rotate(85deg);

     transform: rotate(85deg);

 }

依照@魔芋铃的建议， 以下是效果的链接（再次感谢）：

效果

这里用到一个比较陌生的css属性： transform:rotate(Ndeg)

作用是旋转，其中N为整数，表示旋转的角度。旋转基于对象的重心。

心得：

当对象尺寸（长宽）改变时，旋转的重心也会跟着改变，被这个特性折腾了不少时间。

在上面的光线旋转了一定角度后，宽度看起来会变长一点。于是又修改它的width，然后相应的left、top都需要修改了（因为重心位置变了）。

今天就到这。以后继续。 谢谢观看。

下一篇： [css]我要用css画幅画(二)

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

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

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

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

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

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

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

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

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

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

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

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

    接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...

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

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

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

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

  9. 【html、CSS、javascript-5】css应用场景补充

    一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. Ajax代码简单封装。

    function ajax(url, onsuccess, onfail) {    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest( ...

  2. js、jquery验证时间格式

    下面验证的格式是2012-2-1 或2010-02-01 var reDate = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12 ...

  3. jquery分隔Url的param方法

    最近需要分隔url的querystring,用到了特意记录一下.方法: //获取url中的paramsvar search = location.search.substring(1);//param ...

  4. Support for multiple result sets

    https://blueprints.launchpad.net/myconnpy/+spec/sp-multi-resultsets Calling a stored procedure can p ...

  5. MySQL: @variable vs. variable. Whats the difference?

    MySQL: @variable vs. variable. Whats the difference?   up vote351down votefavorite 121 In another qu ...

  6. java 四舍五入保留小数

    // 方式一: double f = 3.1516; BigDecimal b = new BigDecimal(f); double f1 = b.setScale(2, BigDecimal.RO ...

  7. Java基础复习笔记系列 三

    前几节都是基础中的基础,从第三讲的笔记开始,每次笔记针对Java的一个知识块儿.  Java异常处理 1.什么是异常? 异常是指运行期出的错误.比如说:除以一个0:数组越界:读取的文件不存在. 异常处 ...

  8. js中typeof的使用方法

    typeof在js中是一个一元操作符,可以判断操作数的类型,其返回值为字符串,有number.string.object.boolean.function.undefined.使用方式可以是typeo ...

  9. shell脚本集合

    慢慢学习,慢慢记吧 第一个shell脚本,创建用户,默认密码用户名,使得用户第一次登陆强制修改密码的脚本 #/bin/bash #创建用户,指定初始密码用户名,第一次登陆后强制修改用户名 userad ...

  10. GJM ：Sql 各种语句 以及函数 [转载]

    版权声明:本文原创发表于 [请点击连接前往] ,未经作者同意必须保留此段声明!如有侵权请联系我删帖处理! 1.更改数据库的名称 2.表中有数据的情况下再添加列.删除列 3.在SQLServer 中各种 ...