[css]我要用css画幅画(一)
几年前开始就一直想用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画幅画(一)的更多相关文章
- [css]我要用css画幅画(九) - Apple Logo
接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...
- [css]我要用css画幅画(八) - Hello Kitty
接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- [css]我要用css画幅画(六)
接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...
- [css]我要用css画幅画(五)
接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...
- [css]我要用css画幅画(四)
接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...
- [css]我要用css画幅画(三)
接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...
- [css]我要用css画幅画(二)
接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...
- 【html、CSS、javascript-5】css应用场景补充
一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...
随机推荐
- 基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作
我们在使用EasyUI的时候,很多情况下需要使用到表格控件datagrid,这个控件控件非常强大,使用起来很简洁,但是我在使用中,发现对于一个表里面的外键字段进行转义,并显示引用表的一些名称的操作,却 ...
- Nhibernate的第一个实例
第一个NhIbernate程序 1.目的: a) 链接到oracle数据库 b) 增删改 c) 基本查询.sql查询 d) 视图查询 e) 使用存储过程 f) 多表查询.级联查询 g) 级联增删改 2 ...
- Android使用SAX解析XML(5)
parse_handler.java文件: package com.hzhi.my_sax; import org.xml.sax.Attributes; import org.xml.sax.SAX ...
- WITH RECURSIVE and MySQL
WITH RECURSIVE and MySQL If you have been using certain DBMSs, or reading recent versions of the SQL ...
- PHP内核探索之变量(7)- 不平凡的字符串
切,一个字符串有什么好研究的. 别这么说,看过<平凡的世界>么,平凡的字符串也可以有不平凡的故事.试看: (1) 在C语言中,strlen计算字符串的时间复杂度是?PHP中呢? ...
- SpringMVC 邮件发送
<!--邮件发送实现类--> <bean id="javaMailSender" class="org.springframework.mail.jav ...
- GJM :用JIRA管理你的项目(二)JIRA语言包支持及插件支持 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- IoC和DI的理解
1 概述 当我们想闭上眼睛想如何让我们的软件更加可用可维护时,我们总能想到一个词:松耦合.在这篇文章中,主要讲述了模块间存在的依赖关系,但这种依赖关系违背了依赖倒置原则.在这之后,我们将讨论一种解除软 ...
- Aurelia – 模块化,简单,可测试的 JS 框架
Aurelia 是下一代 JavaScript 客户端框架,利用简单的约定来激发你的创造力.凭借其强大的专注于开发经验, Aurelia 可以使您不仅创造惊人的应用程序,同时也享受这个过程.它经过精心 ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...