情人节,教大家使用css画出一朵玫瑰花。

情人节到了,给大家来一朵高端的玫瑰花。

在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的。

今天我教大脚用CSS来实现一朵玫瑰花。

先看效果

 

首先我们画出一个花瓣

1、画出一个长方形div,背景色设置成渐变色。

2、给四个角使用圆角,底部50%,顶部35%

 

然后使用css的3D属性

3D属性的详细请自行百度,这里不做详细介绍。

从Y轴方向上俯视玫瑰花,就是多个花瓣围绕圆心组成的同心圆。

如下图所示:

 

我们按照这个规则

1、越靠近中心层,花瓣数量越少

2、所有花瓣按在每层花瓣个数,均匀分布

这样就成为了含苞待放的玫瑰

 

 

要想让玫瑰花开发,那么每朵花瓣就不应该跟Y轴平行

必须要从跟Y轴形成向外的角度。

而且越向外层,角度越大。

 

 

这个时候就基本上完成了玫瑰花的效果了。

但是在chrome上,后边加入的div会盖在上边层上,并不一定是我们希望的效果。

所以我们要根据div的Z轴方向上的值来给div增加z-index属性。

z值越小,z-index越小。

 

最后我们跟玫瑰花加上叶子,跟之前花瓣原理是一样的,只是换了颜色和宽度而已。

而且向外开的角度也增大了一些

 

这里就已经完成了,我们把代码复制一份,然后使用requestAnimationFrame做动画效果。角度越来越大。就出现开花效果了。

 

演示效果请访问:http://suohb.com/work/flower2.htm

更多特效,请扫描下方二维码关注公众号:

转载于:https://www.cnblogs.com/shb190802/p/6398964.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫利器一Requests库的用法

之前我们用了 urllib 库,这个作为入门的工具还是不错的,对了解一些爬虫的基本理念,掌握爬虫爬取的流程有所帮助。入门之后,我们就需要学习一些更加高级的内容和工具来方便我们的爬取。那么这一节来简单介绍一下 requests 库的基本…

Windows窗口样式

windows样式有很多种,不同的windows,windows控件接受不同的样式。如Combo box接受下以样式:WS_CHILD AlwaysWS_VISIBLE UsuallyWS_DISABLED RarelyWS_VSCROLL To add vertical scrolling for the list box in the combo boxWS_HSCROL…

Linux 字符设备驱动开发基础(六)—— VFS 虚拟文件系统解析

一、VFS 虚拟文件系统基础概念 Linux 允许众多不同的文件系统共存,并支持跨文件系统的文件操作,这是因为有虚拟文件系统的存在。虚拟文件系统,即VFS(Virtual File System)是 Linux 内核中的一个软件抽象层。它通过一些…

初识 es6

es6 可能出来已经有一段时间了,但是我到今天才发现他的好,却不是很了解他,也不知道各个浏览器的兼容性怎么样?今天就把他们都弄明白。 新增命令 let ES6新增了let命令,用来声明变量。它的用法类似于var,但是…

Python爬虫利器四PhantomJS的用法

大家有没有发现之前我们写的爬虫都有一个共性,就是只能爬取单纯的 html 代码,如果页面是 JS 渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索 JS 渲染的到的一些结果,那简直没天理了。所以&#xff0…

从零开始学习Hadoop--第1章 Hadoop的安装

Hadoop的安装比较繁琐,有如下几个原因:其一,Hadoop有非常多的版本;其二,官方文档不尽详细,有时候更新脱节,Hadoop发展的太快了;其三,网上流传的各种文档,或者…

vim使用—实现程序的自动补齐(C语言)

使用过Source Insight的人一定对它的自动补全功能印象深刻,在很多的集成开发环境中,也都支持自动补全。vim做为一个出色的编辑器,这样的功能当然少不了。至于如何实现程序自动补全,网上教程很多。这里,我将自己配置过程…

8、JDBC入门整理

JDBC入门 l 导jar包:驱动! l 加载驱动类:Class.forName(“类名”); l 给出url、username、password, l 使用DriverManager类来得到Connection对象! 1 什么是JDBC(接口,实现为驱动) JDBC(Java DataBase…

Python 爬虫利器二之 Beautiful Soup 的用法

上一节我们介绍了正则表达式,它的内容其实还是蛮多的,如果一个正则匹配稍有差池,那可能程序就处在永久的循环之中,而且有的小伙伴们也对写正则表达式的写法用得不熟练,没关系,我们还有一个更强大的工具&…

[C#]Attribute特性(3)——AttributeUsage特性和特性标识符

相关文章 [C#]Attribute特性 [C#]Attribute特性(2)——方法的特性及特性参数 AttributeUsage特性 除了可以定制自己的特性来注释常用的C#类型外,您可以用AttributeUsage特性来定义您想怎样使用这些特性。AttributeUsage特性采用如下的调用惯例: 1 [Attri…

Linux 命令 ——less命令

less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大。less 的用法比起 more 更加的有弹性。在 more 的时候,我们并没有办法向前面翻, 只能往后面看,但若使用了 less …

Python 爬虫利器三之 Xpath 语法与 lxml 库的用法

原文链接https://cuiqingcai.com/2621.html 前言 前面我们介绍了 BeautifulSoup 的用法,这个已经是非常强大的库了,不过还有一些比较流行的解析库,例如 lxml,使用的是 Xpath 语法,同样是效率比较高的解析方法。如果大…

android闹钟实现原理

闹钟的原理可用下面我自己画的一幅图来概括:(不对的地方,尽管吐槽) 我们来看看新建闹钟到闹钟响铃的步骤: 1、新建一个闹钟: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22…

将openstack的Token认证信息存储在memcache中

公司线上的openstack环境运行了5个多月的时间,keystone库的token表已经增长到了31GB,这个数据量还是很大的,对于以后的数据库备份很不方便。每次管理openstack的时候,都会产生一个新的token验证,而历史token信息其实都…

Linux 下shell编程

什么是shell?Shell是一个命令解析器,是介于Linux操作系统的内核(kernel)与用户之间的一个绝缘层。shell脚本就是讲各类命令预先放入其中,方便一次性执行的一个程序文件,主要用于方便管理员进行设置或者管理。 序员的角度来看, Sh…

lxml学习【未完成】

链接 https://www.jianshu.com/p/e084c2b2b66d 官方教程

构建之法第四章--两人合作

两人合作 这一章主要讲述代码规范,极限编程,结对编程,两人合作的不同阶段,影响他人的技巧。 这一章主要介绍代码的规范和代码复审,这个也是我们在编码过程中需要注意的,这样既可以方便别人,也方…

Linux环境变量的设置和查看

环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数,比如临时文件夹位置和系统文件夹位置等等。 一、Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1、永久的:需要修改配置文件,变量永…

datastage 重启 续

在重启DS时,不少人肯定会说,一定要在重启之前确认没有人连接DS了。但有时会忘的。虽然说,等一些时间,系统可能会释放死进程,但也有可能,不会。而重启服务器,对于生产系统,可不是那么…

Python urllib、urllib2、urllib3

相关链接: 《Python urllib、urllib2、urllib3用法及区别》 《urllib2库.官方文档翻译》 《urllib3官方文档》 《urllib3的基本用法》 《详解 python3 urllib》