纯CSS3动画：一棵跳舞的树

最新推荐文章于 2022-04-01 20:28:00 发布
转载 最新推荐文章于 2022-04-01 20:28:00 发布 · 177 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/bjwhite/p/6364609.html

本文介绍了一个使用纯CSS3技术实现的跳舞树动画案例。通过精心设置CSS动画属性，如旋转、缩放等，使得树形元素呈现出生动的舞蹈效果。此案例展示了CSS3在网页动画方面的强大能力。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3动画：一棵跳舞的树</title>
<style>
.trunk, .trunk div {
background: #136086;
/*border-radius:$w;*/
width: 100px;
height: 10px;
position: absolute;
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>
</head>

<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>
</html>

转载于:https://www.cnblogs.com/bjwhite/p/6364609.html

用纯css画一颗树
qq_45117533的博客
12-11 965
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .div1{ width: 0px; height: 0px; border-top: 100px solid t...
Canvas递归画一棵树
denglouhen的博客
04-19 1789
点生线，线生面，只要有了基本的构图元素，我们可以用canvas画出各种图案，画棵树简直就是小case了。 画树的思路很简单，大树干分叉出若干的树枝，以不同角度和长度延伸出去并逐渐变细，树枝的末端再延伸树枝，所以很容易想到用递归来实现。 所以递归函数里是在画一层树枝，需要的参数就是： startX：树枝起始的x轴坐标 startY：树枝起始的y轴坐标 length：长度 angle：分叉角度 depth：剩余层数 branchWidth：该层的树枝粗细 于是我们可以实现画出躯干的函数：
纯CSS3实现一棵自己跳舞的树
06-12
效果描述： 左右摆动的一棵树，第一反应应该是图片动画做的 但是你错了，这是用纯代码实现的效果，而且不需要js，是不是很赞呢 使用方法： 1、将body中的代码部分拷贝过去 2、将lanren.css样式引入到你的页面即可 (注意：不兼容低版本浏览器哦)
css3动画与过渡效果结合出现的树叶飘落效果
前端小99的博客
03-16 6091
* { 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; ...
CSS控制border画一棵小树
有被小窝
03-31 702
#container{ width: 300px; background: gray; } #trip1{ width: 00px; margin-left: 20px; border-right-width: 100px; border-right-style: solid; border-right-color: gray; border-bottom
CSS3动画 animation
qq_52301431的博客
04-01 2872
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果， 可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。 格式： animation: 动画名字 动画时间 运动曲线 何时开始 循环次数 反向运动 animation: onemove 5s ease-in-out 2s 3 alternate; 1、基本使用 1.1、语法fro
canvas 画点_css+canvas 随便画一个星空
weixin_39943586的博客
11-28 255
今天躺在床上刷抖音的时候，看见了一个马克笔随便画星空的视频，很有意思。先看效果：开始需求分析：1、渐变色的背景2、画一颗树和一些草3、水面的倒影4、随便画点星星5、画一颗流星1、渐变色的背景先确定200*500的区域，使用css3的线性渐变属性，依次深蓝、浅蓝、紫色、粉色、黄色画出一个渐变色的背景。为了使背景更真实，使用同样的颜色顺序，在不同的角度，加上一些模糊和透明。再画一遍重叠起来。再重叠一层...
纯CSS3实现一棵自己跳舞的树.zip
07-03
左右摆动的一棵树，第一反应应该是图片动画做的 但是你错了，这是用纯代码实现的效果，而且不需要js，是不是很赞呢 使用方法： 1、将body中的代码部分拷贝过去 2、将lanren.css样式引入到你的页面即可 (注意：...
纯CSS3实现一棵自己跳舞的树特效代码
03-20
效果描述： 左右摆动的一棵树，第一反应应该是图片动画做的 但是你错了，这是用纯代码实现的效果，而且不需要js，是不是很赞呢 使用方法： 1、将body中的代码部分拷贝过去 2、将lanren.css样式引入到你的页面即可 ...
纯HTML5+CSS3实现一棵自己跳舞的树
03-28
这个项目“纯HTML5+CSS3实现一棵自己跳舞的树”展示了如何利用这两种技术来创建动态、交互式的网页元素。下面我们将深入探讨这个主题中的关键知识点。 首先，HTML5是超文本标记语言的第五个版本，它引入了许多新的...
纯CSS3实现会跳舞的动画树
08-23
之前我们分享过一款基于...今天我们要介绍一款纯CSS3实现的会跳舞的动画树，首先我们用CSS3绘制树枝和树叶，注意树枝的画法是利用了二叉树原理，在树枝最末端绘制树叶。同时树枝可以任意方向摇摆，形成跳舞的动画效果。
css3动画 会动的背景图片
扬帆前行
07-22 1万+
写一个登录注册页面 背景图类似于动图的动画（背景图中看着像云彩在移动） .login_body{ width: 100%; height: 100%; background: #1C77AC; display: flex; justify-content: center; align-items: center; } .login_backgrou...
css3滚动条动画
kongjunchao159的博客
08-06 1517
css3动画之左右摇摆
热门推荐
super_ce的博客
01-09 3万+
@-webkit-keyframes zy{   10% {     transform: rotate(15deg);   }   20% {     transform: rotate(-10deg);   }   30% {     transform: rotate(5deg);   }   40% {     transform: rotate(-5deg);  
利用css3动画效果编写滑动按钮开关
十年树木的博客
08-31 4074
代码： css3做的滑动开关效果 .switch{ width: 100px; margin: 100px 0px 0 100px; } .btn_fath{ margin-top: 10px; position: relative; border-radius: 20px; } .on.btn_fath { backgro
纯html5+css能写出什么惊人的效果？
weixin_33946020的博客
11-15 124
纯html5+css能写出什么惊人的效果？ 鄙人最近学习css，发现纯html5+css可以实现这般效果：一棵跳舞的树 <!-- 代码部分begin --> <div class="trunk"><div><div><div><div><div><div><div>&lt...
css3动画系列之transition 属性
web前端基础知识
02-10 170
浏览器支持情况：   Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。 Safari 支持替代的 -webkit-transition 属性。 定义和用法 transition 属性是一个简写属性，用于设置四个过渡属性： transition-property transition-durati...
css3实现树木飘动
qq_43665021的博客
11-28 1065
直接上代码 &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;trunk&amp;quot;&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp
css3 做一个会动的菜单 menu 按钮动画效果
FungLeo's Blog
09-11 5489
css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果，小前端部知道如何实现，我看了一眼需要的效果，给他写了一个简单的 demo。设计师给了俩图片，一个是 三 这样的菜单图标，另一个是点击时，变成 X 的图标。希望在这两个图标之间，有动画切换效果。效果演示地址：http://runjs.cn/detail/al9vgagm因为图标非常简单，我们可以用 css 把这俩图标画出来，
无需JS的CSS3动画：用代码实现跳舞的树
1. CSS3动画技术：本案例中，实现了一棵树左右摆动的动画效果，而且是不依赖JavaScript而仅使用CSS3。CSS3中提供了丰富的动画相关属性，可以用来创建平滑的动画效果。常见的CSS动画属性包括@keyframes规则定义动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值