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 중국어 웹사이트의 기타 관련 기사를 참조하세요!