CSS3怎么制作蝴蝶飞舞的动画？蝴蝶飞舞的动画效果是什么样的？CSS3制作蝴蝶飞舞的动画需要注意哪些方面？今天给大家用CSS3做一个蝴蝶飞舞的动画。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS3制作蝴蝶飞舞动画</title>
<meta name="keywords" content=" CSS3制作蝴蝶飞舞动画" />
<meta name="description" content=" CSS3制作蝴蝶飞舞动画" />
<style>
body{
background-color: lightblue;
}
#container {
perspective: 600px;
perspective-origin: -20% 20%;
width: 850px;
height: 566px;
left: 300px;
top: 0px;
color: gray;
margin: 0px auto;
}
#butterfly {
transform: rotateZ(-30deg) rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
transform-origin: 51% 50%;
left: 0px;
top: 0px;
width: 400px;
height: 238px;
transform-style: preserve-3d;
/*Fly in a loop below*/
/*animation-name: butterflyani;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;*/
}
.wing {
transform: rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
transform-origin: top right;
position: absolute;
left: 200px;
top: 0px;
width: 200px;
height: 238px;
background: url(butterfly.png) no-repeat;
animation-name: rightwingani;
animation-duration: 0.6s;
animation-delay: 2s;
animation-iteration-count: 4;
animation-timing-function: ease-out;
}
#butterfly .left{
transform: rotateX(30deg) rotate3d(0, 1, 0, 0deg);
animation-name: leftwingani;
left: 0px;
top: 0px;
}
@keyframes rightwingani {
from {
transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
}
50% {
transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
}
to{
transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
}
}
@keyframes leftwingani {
from {
transform:rotateX(30deg) rotate3d(0, 1, 0, 0deg);
}
50% {
transform:rotateX(30deg) rotate3d(0, 1, 0, 80deg);
}
to{
transform:rotateX(30deg) rotate3d(0, 1, 0, 00deg);
}
}
a {
font-size: 5.5em;
font-family: Arial;
text-decoration: none;
text-align: right;
color: teal;
letter-spacing: -2px;
position: relative;
top: -70%;
left: -9%;
width: 67%;
display: block;
line-height: 1.1em;
}
</style>
</head>
<body>
<div id="container">
<div id="butterfly">
<div class="left wing"></div>
<div class="right wing"></div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>蝴蝶飞舞的动画就是这么做出来的，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是CSS3怎么制作蝴蝶飞舞的动画的详细内容。更多信息请关注PHP中文网其他相关文章！
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
每周平台新闻：Galaxy Store的Web应用程序，Tappable Stories，CSS SubgridApr 14, 2025 am 11:20 AM在本周的综述中：Firefox获得了类似锁匠的力量，三星的Galaxy Store开始支持Progressive Web Apps，CSS Subgrid正在Firefox发货
每周平台新闻：Internet Explorer模式，搜索控制台中的速度报告，限制通知提示Apr 14, 2025 am 11:15 AM在本周的综述中：Internet Explorer进入Edge，Google Search Console吹捧新的速度报告，Firefox提供了Facebook＆＃039；
使用Gatsby组织和准备图像以使图像模糊效果的方法Apr 14, 2025 am 10:56 AM盖茨比（Gatsby）进行了出色的处理和处理图像。例如，它可以帮助您节省图像优化的时间，因为您不必手动
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌
热工具
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
Atom编辑器mac版下载
最流行的的开源编辑器
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
