建设银行河南省分行招聘网站,wordpress建站详解,网站建设个人简历表达,织梦网站内容管理系统情人节到了#xff0c;给大家来一朵高端的玫瑰花。 在网上看到的一个canvas实现的玫瑰花#xff0c;效果很好#xff0c;但是代码被压缩过#xff0c;也没有注释#xff0c;看的云里雾里的。 今天我教大脚用CSS来实现一朵玫瑰花。 先看效果 首先我们画出一个花瓣 1、画出一…情人节到了给大家来一朵高端的玫瑰花。 在网上看到的一个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
