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中文網其他相關文章！
每周平台新聞：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搜索控制台吹捧新的速度報告，而Firefox給出了Facebook＆＃039; s Notification
使用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 無盡。
熱門文章
熱工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SublimeText3 Linux新版
SublimeText3 Linux最新版
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
