几年前开始就一直想用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. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现

    今天做一个管理后台菜单,想着要用无限极分类,记得园子里还是什么地方见过这种写法,可今天找了半天也没找到,没办法静下心来自己写了: 首先创建节点类(我给它取名:AdminUserTree): /// & ...

  3. C#单纯的字母数字ASCII码转换

    字母转换成数字 byte[] array = new byte[1];   //定义一组数组array            array = System.Text.Encoding.ASCII.Ge ...

  4. Scalaz（2）－ 基础篇：随意多态－typeclass, ad-hoc polymorphism

    scalaz功能基本上由以下三部分组成: 1.新的数据类型,如:Validation, NonEmptyList ... 2.标准scala类型的延伸类型,如:OptionOps, ListOps . ...

  5. mysql 常用

    create database jobs;grant all on jobs.* to root@'%' identified by '111111';flush privileges;

  6. Java程序运行时，数据都保存到什么地方？

    程序运行时,我们最好对数据保存到什么地方做到心中有数.特别要注意的是内存的分配.有六个地方都可以保存数据: 寄存器 这是最快的保存区域,因为它位于和其他所有保存方式不同的地方:处理器内部.然而,寄存器 ...

  7. Linux学习笔记18--Linux系统服务基础

      服务(Service):运行在操作系统后台的一个或多个程序,为用户或系统提供某项特定的服务. 服务通常是不中断运行的,随时接收请求,提供某项服务.例如:http网页服务由诸如nginx.apach ...

  8. 15款美丽的设备模板，帮助展示你的 APP

    有什么更好的方式来显示您的应用程序的外观和感觉呢?你看了这些设计示例之后就会有灵感了.无论是在 iPhone,iPad,Android,还是在桌面应用程序或网站,这些设计都增加了一些视觉上的吸引力,并 ...

  9. 【初探移动前端开发05】jQuery Mobile (整合版)

    前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...

  10. 【转】ES6 手册

    目录 var 和 let/const 的比较 用块级作用域代替 IIFES 箭头函数 字符串 解构 模块 参数 类 Classes Symbols Maps WeakMaps Promises Gen ...