大家好,我是前端开发小棉,很高兴在这里分享文章。如果喜欢我的文章,请点赞?关注??。简介今天的主要内容是摇摆的小红花。布局为html+css布局加css3动画效果。这篇文章增加了一个新的知识点transform-origin,想必大家并不陌生。该属性用于设置动画旋转元素基点的位置。比如本文需要小花的移动和摆动动画,需要固定小花顶部中间的基点位置,这样小花才能正常左右摆动。如果没有这个样式,默认是在中间摆动,会显得怪怪的。代码介绍主要是关于小花的制作。底部的蓝色暂时代表草坪。下面说一下小花布局代码的实现过程。1.小花代码:花瓣+眼睛+嘴巴花瓣的实现是由不同的圆角和旋转属性组成,重新定位并以不同的角度连接。html:
