当前位置: 首页 > Web前端 > HTML

纯CSS实现-随风摇曳的花

时间:2023-03-28 17:28:10 HTML

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

样式:.head{width:80px;高度:80px;背景:#EFD4C9;边界半径:60%;边框:3px实心;位置:绝对;左:50%;左边距:-40px;顶部:-124px;}.eye{宽度:6px;身高:10像素;边界半径:50%;背景:#000;位置:绝对;左:50%;左边距:-24px;top:30px;}.eye-right{margin-left:16px;}.mouth{width:14px;高度:4px;边框:3px实心#FA9A9A;边界半径:0050%50%/00100%100%;边框顶部:无;保证金:0自动;位置:绝对;顶部:58px;左:29px;}.petal01{宽度:44px;高度:72px;背景:#FA9A9A;边界半径:60%/50%;边框:3px实心;位置:绝对;顶部:-64px;左:19px;z-指数:-1;变换:旋转(0);}.petal02{顶部:-42px;左:70px;变换:旋转(70度);z-index:-2;}.petal03{top:5px;左:85px;变换:旋转(97度);z-index:-3;}.petal04{top:46px;左:52px;变换:旋转(146度);z-index:-4;}.petal05{top:64px;左:10px;变换:旋转(178度);z-index:-5;}.petal06{top:41px;左:-40px;反式形式:旋转(240度);z-index:-6;}.petal07{top:-8px;左:-53px;变换:旋转(280度);z-index:-7;}.petal08{top:-52px;左:-28px;变换:旋转(317度);z-index:-7;}2.枝叶的外观是这样的。设置border-radius:60%0;旋转角度与树枝拼接在一起html:样式:.branch{width:8px;高度:200px;背景:#C0F0A3;边框:3px实心;边框半径:100px;位置:绝对;左:50%;左边距:-4px;底部:0;z-index:-10;}.leaf{宽度:25px;高度:30px;背景:#8BC363;边界半径:60%0;边框:3px实心;位置:绝对;左:50%;左边距:11px;顶部:86px;变换:旋转(14度);}.leaf02{左边距:-42px;顶部:102px;变换:旋转(-98度);}.grass{宽度:100%;高度:40px;背景:#329A7C;位置:绝对;底部:0;左:0;右:0;margin:auto;}3.动画制作嘴巴微笑动画.mouth{transform-origin:centercenter;动画:微笑2s缓动无限;}@keyframes微笑{来自{width:14px;高度:4px;顶部:58px;左:29px;}到{顶部:58px;左:24px;宽度:24px;高度:6px;@keyframesswing{来自{transform:rotate(-5deg);}to{变换:旋转(5deg);}}最终效果总结以上就是摇摆小花的整个制作过程,学习使用属性transform-origin:bottomcenter;use控制动画,需要把基点固定在那里,比较简单,手写即可。