几年前开始就一直想用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. MySQL 复制介绍及搭建

    MySQL复制介绍 MySQL复制就是一台MySQL服务器(slave)从另一台MySQL服务器(master)进行日志的复制然后再解析日志并应用到自身,类似Oracle中的Data Guard. M ...

  2. HTML 5表单应用小结

    本文内容        HTML 5表单的组织方式         HTML 5表单的新增特性        访问表单控件及响应表单控件事件 HTML 5表单的组织方式 ★  将表单字段及其标签关联起 ...

  3. 实现了IEnumerable接口的GetEnumerator 即可使用 Foreach遍历，返回一个IEnumerator对象

    #region 程序集 mscorlib.dll, v4.0.0.0 // C:\Program Files (x86)\Reference Assemblies\Microsoft\Framewor ...

  4. EC笔记，第一部分：3.尽量使用const

    03.尽量使用const 1.const概述 2.返回const 为何要返回一个const? 因为如果不返回const,程序员可能写出fun(a,b)=c;这样的代码,也许是因为打字错误可能写出类似i ...

  5. 建立MySQL的ODBC

    1. 进入控制面板->管理工具->数据源(ODBC): 2. 点击添加,数据源驱动程序选择MySQL ODBC 5.1 Driver: 3. 弹出MySQL Connecotor/ODBC ...

  6. hibernate------java-delete-insert-update

    **************************************************************************************************** ...

  7. java servlet手机app访问接口(三)高德地图云存储及检索

    这篇关于高德地图的随笔内容会多一点, 一.业务说明     对应APP业务中的成员有两类,一是服务人员,二是被服务人员,  主要实现功能, 对APP中的服务人员位置进行时时定位, 然后通过被服务人员登 ...

  8. 通过参数传递，判断数字、字符串、list、tuple、词典等数据类型是否为可变数据对象

    list: >>> a = [1,2,3,4]>>> a[0]1>>> a[1]2>>> a[0] = 10>>&g ...

  9. Elasticsearch1.7到2.3升级实践总结

    概括 简述 升级分为Elasticsearch server升级和Elasticsearch client api升级 为什么要迁移 当前团队内多个业务方公用一套ES集群,容易被影响,重要业务应该独自 ...

  10. php高级

    php面试题之一--PHP核心技术(高级部分) 一.PHP核心技术 1.写出一个能创建多级目录的PHP函数(新浪网技术部) <?php /** * 创建多级目录 * @param $path s ...