情人节，教大家使用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

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

标签: css3, html5, 玫瑰花

情人节，教大家使用CSS画出一朵玫瑰花。相关推荐

樱花的季节，教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果第一步,我们先画出一棵 ...
用html制作一朵花,SVG画图功能：svg实现画出一朵花（附代码）
本篇文章给大家带来的内容是关于SVG画图功能:svg实现画出一朵花(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 标记和 SVG 以及 VML 之间的一个重要的不同是, 有 ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
[css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
[css] 用css画出一个圆圈，里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...
用css画出一个圆圈，里面有个叉号（不能用英文字母x）
用css画出一个圆圈,里面有个叉号(不能用英文字母x) #cyc {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;b ...
[css] 用css画出一把刻度尺
[css] 用css画出一把刻度尺 <div class='ruler'><div class='cm'><div class='mm'></div>& ...
用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 [html] view pla ...
用python turtle画龙猫_【跟着弹簧学画画】教你一步步画出一只超萌的龙猫来！...
原标题:[跟着弹簧学画画]教你一步步画出一只超萌的龙猫来! 龙猫,日文音译过来是豆豆龙,今天咱们就来画一个吧! 照旧先来感受下动态图↓ 1.先画耳朵,然后画出头部和身体,因为龙猫是圆滚滚的一只画出胳 ...

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

情人节，教大家使用CSS画出一朵玫瑰花。相关推荐

最新文章

热门文章