css3实现树木飘动

最新推荐文章于 2023-06-10 14:12:10 发布
最新推荐文章于 2023-06-10 14:12:10 发布
阅读量914 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43665021/article/details/84592109
版权

直接上代码
Html部分

<body>
	<div class="trunk">
			<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></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>
								</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></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>
							<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></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></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>
								</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>
							<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>
									<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></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></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></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></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>
									<div>
										<div></div>
										<div></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

css部分

<style type="text/css">
			.trunk,
			.trunk div {
				background: #136086;
				width: 100px;
				height: 10px;
				position: absolute;
				left: 50%;
				top: 70%;
				margin-left: -10px;
				-webkit-animation-name: rot;
				animation-name: rot;
				-webkit-animation-duration: 2.02s;
				animation-duration: 2.02s;
				-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
				-webkit-animation-direction: alternate;
				animation-direction: alternate;
				-webkit-transform-origin: 5px 5px;
				-ms-transform-origin: 5px 5px;
				transform-origin: 5px 5px;
				-webkit-animation-timing-function: ease-in-out;
				animation-timing-function: ease-in-out;
			}
			
			.trunk.trunk,
			.trunk div.trunk {
				bottom: 0;
				left: 50%;
				-webkit-animation-name: rot-root;
				animation-name: rot-root;
				-webkit-animation-duration: 2.5s;
				animation-duration: 2.5s;
			}
			
			.trunk>div,
			.trunk div>div {
				/*opacity:0.9;*/
				top: 0;
				left: 100px;
				-webkit-animation-duration: calc(inherit / 2);
				animation-duration: calc(inherit / 2);
				/* don't works  */
			}
			
			.trunk>div:nth-child(2),
			.trunk div>div:nth-child(2) {
				/*animation-duration:15s;*/
				-webkit-animation-name: rot-inv;
				animation-name: rot-inv;
				-webkit-animation-duration: 1.7s;
				animation-duration: 1.7s;
			}
			
			@-webkit-keyframes rot {
				from {
					-webkit-transform: rotate(15deg) scale(0.72);
					transform: rotate(15deg) scale(0.72);
				}
				to {
					-webkit-transform: rotate(45deg) scale(0.72);
					transform: rotate(45deg) scale(0.72);
				}
			}
			
			@keyframes rot {
				from {
					-webkit-transform: rotate(15deg) scale(0.72);
					transform: rotate(15deg) scale(0.72);
				}
				to {
					-webkit-transform: rotate(45deg) scale(0.72);
					transform: rotate(45deg) scale(0.72);
				}
			}
			
			@-webkit-keyframes rot-inv {
				from {
					-webkit-transform: rotate(-45deg) scale(0.72);
					transform: rotate(-45deg) scale(0.72);
				}
				to {
					-webkit-transform: rotate(-15deg) scale(0.72);
					transform: rotate(-15deg) scale(0.72);
				}
			}
			
			@keyframes rot-inv {
				from {
					-webkit-transform: rotate(-45deg) scale(0.72);
					transform: rotate(-45deg) scale(0.72);
				}
				to {
					-webkit-transform: rotate(-15deg) scale(0.72);
					transform: rotate(-15deg) scale(0.72);
				}
			}
			
			@-webkit-keyframes rot-root {
				from {
					-webkit-transform: rotate(-95deg);
					transform: rotate(-95deg);
				}
				to {
					-webkit-transform: rotate(-85deg);
					transform: rotate(-85deg);
				}
			}
			
			@keyframes rot-root {
				from {
					-webkit-transform: rotate(-95deg);
					transform: rotate(-95deg);
				}
				to {
					-webkit-transform: rotate(-85deg);
					transform: rotate(-85deg);
				}
			}
		</style>

效果展示图
在这里插入图片描述

Ms. Yao
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css3空中飘动的云动画特效
09-13
css3空中飘动的云动画特效
css3蒲公英飘动效果_CSS3飘动的云动画特效
weixin_29280219的博客
12-23 214
【实例简介】手写动画特效天空中飘动的云，适合场景跟流动登陆等效果【实例截图】【核心代码】.satic-area {position: relative;width: 100%;height: 100%;background: url(img/poster-about.jpg) no-repeat 100% 100%;background-size: cover;}.dynamic-area1 ...
css3全屏树叶飘落动画背景特效
06-11
css3全屏树叶飘落动画背景特效，叶子默认是粉红色，可以在css里自定义修改叶子的颜色。
css3动画与过渡效果结合出现的树叶飘落效果
前端小99的博客
03-16 5948
* { padding: 0; margin: 0; } ul, ol { list-style: none; } a { text-decoration: none; color: #000; } section { height: 600px; border-bottom: 1px solid #000; position: relative; ...
CSS3 如何实现飘动的云朵动画
qq_63299825的博客
06-10 4151
过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，不过对过渡动画理解后再不习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。
CSS3实现光感圆圈动画特效代码
03-20
CSS3实现光感圆圈动画
CSS3空中白云飘动动画特效特效代码
03-20
CSS3空中白云飘动动画特效是一款蓝天白云浮动动态背景代码。
CSS3实现swap交换动画
09-24
主要为大家介绍了CSS3实现swap动画，实现一个交换动画，一个笑脸慢慢从远处，回到自己的原来位置的一种效果，这种动画在JS里面也是很多见的，感兴趣的小伙伴们可以参考一下
CSS3实现MacBook苹果笔记本特效特效代码
03-20
CSS3实现MacBook苹果笔记本特效是一款纯CSS3绘图制作的苹果笔记本样式代码。
css3实现Metro Icon特效代码
03-20
css3实现Metro Icon是一款基于CSS3实现的Metro UI字体图标效果。 css3实现Metro Icon特效图：
CSS3 SVG绘制模拟旗帜飘动特效.zip
07-04
CSS3 SVG绘制模拟旗帜飘动特效是一款被风吹动的小旗帜动画特效。
CSS3树叶子飘落背景特效
04-25
CSS3树叶子飘落背景特效是一款全屏粉红色树叶飘落动画背景特效。
纯CSS3实现会跳舞的动画树
08-23
之前我们分享过一款基于HTML5 SVG的跳舞花朵，非常的可爱。今天我们要介绍一款纯CSS3实现的会跳舞的动画树，首先我们用CSS3绘制树枝和树叶，注意树枝的画法是利用了二叉树原理，在树枝最末端绘制树叶。同时树枝可以任意方向摇摆，形成跳舞的动画效果。
css3风吹树叶,纯CSS3实现的树叶形状和飘落动画
weixin_39782709的博客
08-03 811
CSS语言：CSSSCSS确定* {box-sizing: border-box;}body {background: #1d1f20;padding-top: 40px;}.leaves {height: 300px;width: 42em;margin: 0 auto;}.leaf {position: relative;width: 8em;display: inline-block;bot...
纯HTML+CSS写出一颗会飘动的树，有没有惊艳到你呢？
weixin_30566149的博客
01-31 287
前言 使用HTML+CSS能写出什么惊人的效果呢？ 针对这个问题，我总会看到类似的回答，比如没有JS，前端永远都是静态的；HTML5要搭配JS，要不然一文不值。 JS固然强大，但CSS也并非一文不值，这里我就要为CSS3鸣不平了，说出上面那些回答的人可能真的不了解CSS的强大之处。 今天这篇文章我们就一起来看看使用纯HTML+CSS如何写出一棵会飘动的树吧，看看你有没有被惊艳到。 文章末...
前端实现旗帜飘动效果系列 (Ⅰ)：dom+css实现
weixin_33937913的博客
07-03 2340
2019独角兽企业重金招聘Python工程师标准>>> ...
纯css3绿色卡通树图形js特效
ICode联盟
02-06 150
下载地址 纯css3绿色卡通树图形特效是一款卡通树，创意的树木，绿色的树ui图形特效。 dd:
html5 下拉树,Html5 canvas弹性拖动大树摇摆动画特效
weixin_39638708的博客
06-03 251
特效描述：Html5 canvas 弹性拖动 大树摇摆 动画特效。基于Html5与canvas实现的弹性拖动大树摇摆动画特效源码代码结构1. 引入CSS2. 引入JS3. HTML代码function lerp(a, b, p) {return (b - a) * p + a;}VerletJS.prototype.tree = function (origin, depth, branchLen...
纯css3树叶飘落动画js特效
ICode联盟
05-12 526
下载地址 使用css3代码画的树叶，并且有树叶飘落的动画效果。 dd:
css3实现文字3D效果
最新发布
07-14
要实现文字的3D效果，你可以使用CSS3的`transform`属性。下面是一个示例代码，展示了如何使用CSS3实现文字的3D旋转效果： ```html <!DOCTYPE html> <html> <head> <style> .text { font-size: 48px; font-weight: bold; color: #fff; background-color: #333; padding: 20px; transform: perspective(1000px) rotateY(45deg); } </style> </head> <body> <div class="text">Hello, CSS3!</div> </body> </html> ``` 在这个示例中，我们使用了`perspective`函数来设置视角距离，然后使用`rotateY`函数来使文字在Y轴上进行旋转。你可以根据需要调整`perspective`和`rotateY`的值来达到不同的效果。 此外，你还可以使用其他的CSS3属性，如`translateX`、`translateY`、`scale`等来进一步调整文字的3D效果。希望能帮到你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值