@keyframes花瓣动画（代码比较简单，实现炫酷特效）

已于 2022-07-13 10:56:56 修改
阅读量388 收藏 3
点赞数 5
分类专栏： @keyframes 文章标签： 动画 css3 css
于 2022-05-25 20:40:58 首次发布
//小刘写的
本文链接：https://blog.csdn.net/liuyibo0314/article/details/124973317
版权

 第一种，两端开花

<div class="flower">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
<style>
			.flower{
				position: relative;
				top: 200px;
				left: 200px;
				width: 500px;
				height: 500px;
				
			}
			.flower>div{
				width: 200px;
				height: 200px;
				border-radius: 0 100%;
				background-color: pink;
				opacity: 0.5;
				position: absolute;
				left: 56px;
				top: 84px;
				/* 设置中心点 */
				transform-origin: right bottom; 
				/* 旋转45度 */
				transform: rotate(45deg);
				/* 过渡 */
				transition: 1s;
			}
			.flower:hover>div:nth-child(2){
				transform: rotate(48deg);
			}
			.flower:hover>div:nth-child(3){
				transform: rotate(42deg);
			}
			.flower:hover>div:nth-child(4){
				transform: rotate(53deg);
			}
			.flower:hover>div:nth-child(5){
				transform: rotate(37deg);
			}
			.flower:hover>div:nth-child(6){
				transform: rotate(58deg);
			}
			.flower:hover>div:nth-child(7){
				transform: rotate(32deg);
			}
			.flower:hover>div:nth-child(8){
				transform: rotate(65deg);
			}
			.flower:hover>div:nth-child(9){
				transform: rotate(25deg);
			}
			.flower:hover>div:nth-child(10){
				transform: rotate(75deg);
			}
			.flower:hover>div:nth-child(11){
				transform: rotate(15deg);
			}
			.flower:hover>div:nth-child(12){
				transform: rotate(85deg);
			}
			.flower:hover>div:nth-child(13){
				transform: rotate(5deg);
			}
			.flower:hover>div:nth-child(14){
				transform: rotate(98deg);
			}
			.flower:hover>div:nth-child(15){
				transform: rotate(-8deg);
			}
			.flower:hover>div:nth-child(16){
				transform: rotate(113deg);
			}
			.flower:hover>div:nth-child(17){
				transform: rotate(-23deg);
			}
			.flower:hover>div:nth-child(18){
				transform: rotate(125deg);
			}
			.flower:hover>div:nth-child(19){
				transform: rotate(-35deg);
			}
		</style>

第二种，圆形开花

<style>
			div:nth-child(1){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
		 	background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move1 6s 1s forwards;
			}
			@keyframes move1 {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(-20deg);
				}
			}
			
			div:nth-child(2){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move2 6s 1s forwards;
			}
			@keyframes move2 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-40deg);
				}
			}
			div:nth-child(3){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move3 6s 1s forwards;
			}
			@keyframes move3 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-60deg);
				}
			}
			div:nth-child(4){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move4 6s 1s forwards;
			}
			@keyframes move4 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-80deg);
				}
			}
			div:nth-child(5){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move5 6s 1s forwards;
			}
			@keyframes move5 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-100deg);
				}
			}
			div:nth-child(6){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move6 6s 1s forwards;
			}
			@keyframes move6 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-120deg);
				}
			}
			div:nth-child(7){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move7 6s 1s forwards;
			}
			@keyframes move7 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-140deg);
				}
			}
			div:nth-child(8){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move8 6s 1s forwards;
			}
			@keyframes move8 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-160deg);
				}
			}
			div:nth-child(9){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move9 6s 1s forwards;
			}
			@keyframes move9 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-180deg);
				}
			}
			div:nth-child(10){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move10 6s 1s forwards;
			}
			@keyframes move10 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-200deg);
				}
			}
			div:nth-child(11){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move11 6s 1s forwards;
			}
			@keyframes move11 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-220deg);
				}
			}
			div:nth-child(12){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move12 6s 1s forwards;
			}
			@keyframes move12 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-240deg);
				}
			}
			div:nth-child(13){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move13 6s 1s forwards;
			}
			@keyframes move13 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-260deg);
				}
			}
			div:nth-child(14){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move14 6s 1s forwards;
			}
			@keyframes move14 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-280deg);
				}
			}
			div:nth-child(15){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move15 6s 1s forwards;
			}
			@keyframes move15 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-300deg);
				}
			}
			div:nth-child(16){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move16 6s 1s forwards;
			}
			@keyframes move16 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-320deg);
				}
			}
			div:nth-child(17){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move17 6s 1s forwards;
			}
			@keyframes move17 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-340deg);
				}
			}
			div:nth-child(18){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move18 6s 1s forwards;
			}
			@keyframes move18 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(-360deg);
				}
			}
			div:nth-child(19){
				position: absolute;
				left: 400px;
				top: 200px;
				width: 100px;
				height: 300px;
				border-radius: 50%;
			background-color: rgba(234, 73, 191, .3);
				margin: 50px auto;
				transform-origin: 50% 100%;
				animation: move19 6s 1s ;
			}
			@keyframes move19 {
				from {
					transform: rotate(0deg);
				}
			
				to {
					transform: rotate(0deg);
				}
			}
		</style>
<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>

代码比较简单，重复较多

需要源码私信或者评论一下，发成图片了

小刘03
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
樱花飞舞
diejian7742的博客
02-28 7377
<!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花漫天飞舞</title> </head> <style> body { padding:0; margin:0; overflow:hidden; ...
python创意小作品-Python竟能画这么漂亮的花,帅呆了(代码分享)
q6q6q的专栏
10-28 5916
阅读本文大概需要3分钟关于函数和模块讲了这么久，我一直想用一个好玩有趣的小例子来总结一下，同时也作为实战练习一下。趣味编程其实是最好的学习途径，回想十几年前我刚毕业的时候，第一份工作就给手机上写app，当时觉得非常好玩,那个是时候还是用symbian系统，熬了好几个通宵用j2me写了一个坦克大战，到现在还记得当程序运行的时候坦克互战的情景,真的是蛮兴奋的。好吧一下子扯远了，我们还是回到正题：我想来...
计算机图形学画花瓣曲线
11-24
利用VC，划出花瓣曲线。用户可以通过交互，控制四个变量来改变花瓣形状：半径大小，旋转角度，花瓣数目，花瓣厚度。
用代码写的花瓣特效（HTML）
02-10
HTML花瓣特效
html5 canvas绘画生成花朵动画代码
11-06
html5 canvas绘画生成花朵动画代码 html5 canvas绘画生成花朵动画代码
今天是六一儿童节~身为我们班的信息担当的我为我们班同学准备了一个小惊喜，你确定不来看看吗（turtle库实现：送给同学们一朵小红花）
qiuweichen1215的博客
06-01 1591
祝所有人儿童节快乐~天天开心~今天呢，也是一年一度的六一儿童节（虽然各位大佬可能不过，但是我还是要过的），在我们六年级过的时候，我们班同时也举行了毕业典礼，为了这个毕业典礼，我写了一晚上代码（这就是昨天没更新的原因），也就写了两个小时就写完了，所以今天我们用Python里的turtle库（随便写的，要不然我怎么会写turtle库呢）实现一个小红花吧送给我们班的同学们~（千万不要让老师知道我把电脑控屏软件给破解了，极域电子教室，某些人别跟信息老师说）也是非常的水~
python画圆弧组成的花瓣代码,如何用python画花瓣
2301_81900439的博客
01-06 377
大家好，给大家分享一下python画圆弧组成的花瓣代码，很多人还不知道这一点。babbage=turtle.Turtle() #创建一个名字叫babbage的turtle对象。babbage.forward(100) #向前移动了100像素。babbage.left(90) #使babbage左转90°。babbage.circle(10) #画个半径为10像素的圆。babbage.begin_fill() #为圆填充颜色。babbage.right(90) #右转90°。#导入turtle模块。
HTML5花瓣飘落动画js特效canvas
ICode联盟
06-21 890
下载地址HTML5花瓣飘落动画特效，canvas实现的炫酷动态网页背景。dd:
JS动态樱花特效
最新发布
haoranyyy的博客
03-03 461
【代码】JS樱花特效。
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
热门推荐
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
CSS3 @keyframes简单动画实现
09-24
主要介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
@keyframes规则实现多重背景的CSS动画
09-24
主要介绍了@keyframes规则实现多重背景的CSS动画,代码中使用的是效果图中显示的素材,仅作为脚本示例在此便不提供下载了,需要的朋友可以参考下
@keyframes和animation动画
03-29
前端——css学习
CSS3中的@keyframes关键帧动画的选择器绑定
12-13
在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称 语法 CSS Code复制内容到剪贴板 @keyframes ...
html花瓣旋转成花,CSS 风车（花瓣）旋转动画圆角
weixin_42539414的博客
06-19 927
这是一个综合的案例，用到了transition(动画，动作在单位时间内完成)，transform(旋转)，border-radius(圆角)，absolute(定位)，linear-gradient(线性渐变),box-shadow(阴影)。这里记录一下备忘，贴出源码，方便下次使用时理解，粘贴代码可以直接可以看效果。Title/*禁用所有元素的内外边距*/*{margin: 0;padding: ...
@keyframes实现页面动画效果
wqy18378671261的博客
06-13 1031
CSS3动画本质上是增强的过渡。 CSS3动画基于关键帧，动画的定义分两部分定义的。 （1）使用 @keyframes 规则创建一个动画，用于定义应用动画的属性； （2）在样式声明时，使用 animation 及其相关属性调用关键帧以实现动画。 使用@keyframes规则创建动画的语法格式： 语法格式1： /*指定关键帧组的名字以方便后面调用*/ @keyframes 关键帧组名{ /*初始效果*/ from{起始样式属性值 } /*结束状态*/ to{ 结束样式属性值 } } 语法格式
css动画 画一个玫瑰花
weixin_62298882的博客
03-30 489
z-index：元素的堆叠顺序 越大 元素的层级越大 当元素发生层叠时，层级高的元素会覆盖在层级低的元素上面，使层级低的元素的重叠部分被覆盖 与父元素比较。在画出两片绿叶 同样在第一片花瓣的基础上截取一部分 并将background-color设置为绿色。然后在每一个选择其中 加入它 并将延迟时间改为不一致的 会在视觉上产生先后。紧接着在第一片花瓣的基础上画出整个花瓣 通过旋转。继续画出根 并通过定位将根放在合适的位置。第二片绿叶在第一片的基础上进行旋转。设置动画 一个一个步骤来。
HTML期末大作业~ 端午节节日7页面 ~学生网页设计作业源码(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-08 8482
HTML期末大作业~ 端午节节日7页面 ~学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页
js 飘落的花瓣
qq_38581311的博客
04-27 3314
    网上搜了搜，没看到用js，css 动画做的效果。用jquery的也没看懂，所以记录一下。    实现途径：css 动画实现花瓣飘落，旋转。js 实现随机出现花瓣，以及消失。    缺点：perspective属性没用出效果；css动画出现卡顿，需要渲染跟3d加载，暂时不会弄。    优点：学过的都会懂，随便改。至于能不能改成你想要的，你猜……    css动画代码：    #petala{...
@keyframes属性动画效果
06-03
@keyframes是CSS3中用来定义动画的关键字，通过定义动画的关键帧（即动画在不同时间点的状态），来实现元素的动画效果。 具体来说，@keyframes规则由动画名称、动画关键帧和动画属性组成。动画名称用来标识动画，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小刘03

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值