通过CSS动画实现了生动的飞鸟动画效果。每只鸟都有自己独特的飞行路径和翅膀煽动动画,共同营造出一种动态而美丽的视觉体验。
详细说明:
页面结构
- HTML部分:
- 包含一个主容器
<div class="container">
,用于放置整个动画。 - 内部包含一个标题
<h1>
,显示“SVG飞鸟动画”。 - 包含四个鸟类容器,每个容器内有一个鸟类元素。每个鸟类容器有不同的类名(如
bird-container--one
、bird-container--two
等),以便应用不同的动画效果。
样式
- 全局样式:
- 使用Normalize CSS来重置默认的浏览器样式,确保一致性。
- 设置基本的字体和行高,并禁用某些元素的溢出隐藏。
- 标题样式 (
h1
): - 字体颜色为黑色,大小为4rem,带有阴影效果,使其更具立体感。
- 使用相对定位和较高的z-index值,确保标题在背景之上显示。
- 容器样式 (
.container
): - 使用绝对定位和弹性盒布局,使内容居中对齐。
- 设置最小高度为35rem,并使用线性渐变和背景图片创建丰富的背景效果。
- 背景图片从上到下逐渐变化颜色,并覆盖整个容器。
- 鸟类样式 (
.bird
): - 使用背景图像来表示鸟类,背景图像来自SVG文件。
- 设置宽度和高度,确保图像正确显示。
- 使用CSS动画
fly-cycle
来实现翅膀煽动的效果,通过改变背景位置模拟飞行动作。 - 鸟类容器样式 (
.bird-container
): - 使用绝对定位,初始状态下位于屏幕左侧外侧。
- 初始缩放比例为0,通过动画逐渐放大并移动到右侧。
- 每个鸟类容器有独特的动画名称(如
fly-right-one
、fly-right-two
等),确保每只鸟有不同的飞行路径和速度。
动画
- 翅膀煽动动画 (
fly-cycle
): - 通过改变背景位置来模拟翅膀煽动的动作。
- 在100%时,背景位置偏移到-900px,完成一次完整的煽动周期。
- 飞行路径动画 (
fly-right-one
,fly-right-two
,fly-right-three
,fly-right-four
): - 定义了每只鸟的不同飞行路径,包括垂直和水平方向的位移以及缩放比例的变化。
- 每个动画的关键帧定义了不同时间点上的变换状态,使得鸟类能够流畅地从左向右飞行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG飞鸟动画</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* Normalize CSS */ button, hr, input { overflow: visible; } audio, canvas, progress, video { display: inline-block; } progress, sub, sup { vertical-align: baseline; } html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } menu, article, aside, details, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: .67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input {} /* This seems redundant and can be removed */ button, select { text-transform: none; } [type=submit], [type=reset], button, html [type=button] { -webkit-appearance: button; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: ButtonText dotted 1px; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress {} textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } [hidden], template { display: none; } *, *::before, *::after { box-sizing: border-box; } h1 { color: black; font-size: 4rem; letter-spacing: -3px; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); position: relative; z-index: 3; } .container { z-index: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 35rem; background-image: linear-gradient(to bottom, rgba(255, 168, 76, 0.6) 0%, rgba(255, 123, 13, 0.6) 100%), url("https://syjm.net/public/bg1.webp"); background-blend-mode: soft-light; background-size: cover; background-position: center center; padding: 2rem; } .bird { background-image: url("data:image/svg+xml;base64,CjxzdmcgaWQ9ImJpcmQtY2VsbHMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDM2NzEgNTEwIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPGc+CiAgICAgIDxwYXRoIGNsYXNzPSJjZWxsLWNvbnRhaW5lciIgc3Ryb2tlPSJub25lIiBkPSJNLjUuNWgzNTl2NTA5SC41eiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2VsbC1jb250YWluZXIiIHN0cm9rZT0ibm9uZSIgZD0iTTM1OS41LjVoMzU5djUwOWgtMzU5eiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2VsbC1jb250YWluZXIiIHN0cm9rZT0ibm9uZSIgZD0iTTcxOC41LjVoMzU5djUwOWgtMzU5eiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2VsbC1jb250YWluZXIiIHN0cm9rZT0ibm9uZSIgZD0iTTEwNzcuNS41aDM3MHY1MDloLTM3MHoiLz4KICAgICAgPHBhdGggY2xhc3M9ImNlbGwtY29udGFpbmVyIiBzdHJva2U9Im5vbmUiIGQ9Ik0xNDQ4LjUuNWgzNzB2NTA5aC0zNzB6Ii8+CiAgICAgIDxwYXRoIGNsYXNzPSJjZWxsLWNvbnRhaW5lciIgc3Ryb2tlPSJub25lIiBkPSJNMTgxOC41LjVoMzcwdjUwOWgtMzcweiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2VsbC1jb250YWluZXIiIHN0cm9rZT0ibm9uZSIgZD0iTTIxODkuNS41aDM3MHY1MDloLTM3MHoiLz4KICAgICAgPHBhdGggY2xhc3M9ImNlbGwtY29udGFpbmVyIiBzdHJva2U9Im5vbmUiIGQ9Ik0yNTU5LjUuNWgzNzB2NTA5aC0zNzB6Ii8+CiAgICAgIDxwYXRoIGNsYXNzPSJjZWxsLWNvbnRhaW5lciIgc3Ryb2tlPSJub25lIiBkPSJNMjkzMC41LjVoMzcwdjUwOWgtMzcweiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2VsbC1jb250YWluZXIiIHN0cm9rZT0ibm9uZSIgZD0iTTMzMDAuNS41aDM3MHY1MDloLTM3MHoiLz4KICAgICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTUxIDI4OC4zOGMxMy4zMy01LjM0IDM1LjMzLTkuMzQgNjYtMTIgMCAwIDE4LjQ0LTkuOTUgNTUtMTUgMS4wNC0uMTUgNy41LTggMzYtMTMgMTYgMCAyMS0zLjg4IDMwIDUgMy41My0xMy41MyAxOS4xMy0xNi41OCAyOS0xNSA2LjkgMS4xIDExLjMgNS45MyAxMiA4IDQgMTIgMjEgNSAzMCAxMi0yMyA2LTIzIDctMzIgMTEtMTYgMTQtMzEgMzEtNDcgMzEtMTYgNC0zMi44MyA1LjMzLTUwLjUgNC0xIDQtMy41IDYuNjYtNy41IDgtNiAyLTEtOS00LTEycy0zIDEwLTE3IDE4Yy0xLTE0LTUtMTAtNS0xOHM0IDEzLTE3IDE4Yy0xNCAzLjMzLTMxLjY3IDQtNTMgMiAyNi04LjY3IDQxLjMzLTE2LjM0IDQ2LTIzLTUgMC0xOC0xLTIxLTktMTQtNC41LTMwLjY3LTQuNS01MCAweiIvPgogICAgICA8cGF0aCBmaWxsPSIjMDAwIiBkPSJNNjM5IDI3M2MwIDIuMDctMTAgMy0xNiA1LTkgMS04IDgtMTQgN3MtNSA4LTE5IDE0YzIgMTEgMjEgOSAzNiAxOSAyOSAzMC42MiAxOCAxOSAzNyA2MyAxNCAyOCAxOCAzMCAyNyA1Ny0xIDEtMTEtMS0xNC03LTEgNS01IDEtNCA3LTUtMS04LTgtMTItMTEtNC0xIDEgNy0yIDgtNCAwLTUtOC05LTgtNCAxIDEgNi0yIDctMzMtMzAtNDMtMjEtNDMtMzYtOCAxMC0xMC0yLTE5IDMtNC01LTYtMTAtMi0xNy0xLTUtNyA1LTExIDMtMS4zMy02IDEtMTIuNjcgNy0yMC02LjY3IDYuNjctMTQgMTAtMjIgMTAgMS0xMC0xLTYuNSA1LTE2LTYgNy41LTEzIDgtMTkgNi00LjQzLTIuMSA0LTggMi0xMS41LTggMC0yMi43Ni0uMy0yNC0zLjUtMy4yNi04LjQgOC0xOSA0LTI1LTMuMTItNC42Ny0xMiA5LTE1LTMgMC0xMi00LjY3LTE3LTE0LTE1LTguNjctMS4zMy0xOS4zMy0xLjMzLTMyIDAtMTkgMi0yNy01LTU4LTUgMTAtNSA5LTEzIDI3LTEzLTIxLTMtMTAtMTAtNDUtMTMgMzAtOCAzMiAwIDU0IDcgNjgtNyAyMi0xNSA5NC0yMiAxNC0yIDM2LTQgNTggMiA1LTIgNi01IDE1LTYgOCAwIDEyLjY3IDMuNjcgMTQgMTEgMTAuNjcuNzIgMTYgMS43MiAxNiAzeiIvPgogICAgICA8cGF0aCBmaWxsPSIjMDAwIiBkPSJNNzI5IDI5OS4wM2MzMi0xNCA1Ni0yNiA5MC00MCAyMC02IDM3LTUgNTYtOCAyOCAwIDE3LTggNTUtMyA4LTEgMTAuOTUtNy41IDE5LTcgOC42NyAwIDEzLjMzIDIuNjYgMTQgOGwyNiA1LTI0IDVjLTIuNjcgNS4zMy04IDguMzMtMTYgOS0xMiAxMi0xMSAxOC0yOSAyMSAyMiAxMyAyMyAxNyA2NCAzOCAxMyAxMSAxMyAxNSAxNyAzMSA0IDE1Ljk4IDE0LjA2IDI1Ljc0IDIxIDM1IDI2IDQ2IDIzIDU5IDQ1IDgwLTExLTEtMjMtOC0yOC0xMy00LTEtMyA1LTMgOC02LTItOC0xNS0xNi0xMy0zLjQ2IDAgNCA1IDAgMTMtMTMtNS0xNC03LTE2LTEzLTMtNC03LTExLTMtMTItMiA4IDAgMTItNiAxMi01LTEwLTctMy0xMS0xMi04LTE0LTE3LTEyLTE3LTI5LTQgMC03IDQtMTAgOS0zLTQgMC05LTEtMTItMiAuNjYtNC4zMyAxLjY2LTcgMy0yLTEyLjY3LTItMjEuNjcgMC0yNy04IDItNCA2LTE1IDEwLTUtNi00LTEyLTItMjEtNSA2LTUtMy0xMiAyLTktOS0xMC0xOC0yNS0xOC01LTEyLTMtMjAtMTEtMjItMy4yMy44Ni00IDEwLTYgN3MtMi0xMC01LTEyYy0yLTMtNiA2LTkgMyAwLTUtMi0xMS02LTE0LTMtNC01IDAtMTAgMy0yLTUtMi05LTEtMTQtNC0xLTE0IDUtMTItMiAwLTctNC00LTgtNC01IDAgMS01LTEtNi01LTItMTMgMi0yMSA2LTUtMiA0LTEwIDAtMTAtMzEtMS0zOCA3LTc2IDR6Ii8+CiAgICAgIDxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0xMzY3IDI1NC4xbC0xOC0zYy0yLTYtNS4zMy05LjM1LTEwLTEwLTE0LTEtMTcgNy0yMiAxMC0yMS0zLTE5LTEtMzUgMC0zMC01LTM2IDQtNTAgNy0zNiA1LTMzIDktNDggMTYtMzQgMTgtNDEgMTktNzUgMjkgNi42Ny42NSAxNCAwIDIyLTItMTQuNjcgNC0yMSA2LjMyLTE5IDcgMzEtNSAyOS4wMiA0LjIzIDUyIDAgMTEtMyAxMC05IDEzLTEyIDIgNyAxIDcgMiAxMyAxNi0zIDIxLTIgMzAtMiAzIDQtMy42NiA4LjYgMCAxMCA0LTEuMzUgOS4zMy0yLjY4IDE2LTQtNCA0LjY1LTUuNjcgOC4zMi01IDExIDE1IDIgMTIgNCAyNCAxLTExIDQtMTEgNC0xNiAxMCAxNiAzIDE0IDEgMjQgMi00IDQtMyA4LTEgMTEgNi0zIDkuNTMtNC41IDEyLTMtMyAzLjQ0LTUgNy0yIDkgMTAtMiAxMi40LTUuMjggMTUtMi0zIDggMCAxMSAxIDIyIDUgMCAxMC0yIDE1LTQgMSA4LTMgOC0zIDE2IDYgMyAxMy0zIDE3LTEtNyA0LTcgNi04IDkgNyAzIDYgMiAxNCAwLTUuMzMgNC03IDcuNjUtNSAxMSA1LjMzLTMuMzUgOC4zMy0zLjM1IDkgMC0yIDYgMCA3IDEgMTUgMTAtNSAxMCAyIDIxIDUgNS45NyAzLjI3IDYuNCAxMC41NCAxMSAxNCA5IDYuNzQgMjAgOSAxOSA5cy05LTExLTUtMTBjMy4zMyA0IDcuNjcgOC4zMiAxMyAxMyAwLTgtLjY3LTEzLjY4LTItMTcgOSAxNCAxMiAxMiAyOCAyMyAzLTEzLTYtMTgtMTUtMjggMTkgMjIgMTkgMjAgMzAgMjQtMjQtMzAtMjAtMjYtMjktNTMtMTQtMjYtMjQtNjEtMzktNzUtMTgtMTItMTktMTctMzgtMjYtMy4zMy00LjY4LTcuMzMtOC0xMi0xMCAxMi0yIDIxLjMzLTUuNjggMjgtMTEgMi01IDctNSAxMS05IDYtMS4zNSA5LjY3LTQuMzUgMTEtOWwxOC02eiIvPgogICAgICA8cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTc1MSAyNTZjLTExLTEtMTItNC0yNC02LTMtNi00LTUtMTAtNy0xNCAwLTIxIDctMjkgMTItMjQtMy0zMS0xLTQ0IDItNDYgMTItNDMgMTItNzAgMjMtNDYgMjctMzkgMzAtNTggNDAgMjMgNiAzMS0zIDQ3LTctNi42NyAyLjY3LTguNjcgNi02IDEwIDYuNjctMi42NyAxMS0zLjY3IDEzLTMtNSAyLTkuNyAxMC41Ny01IDEwIDI3LTIgMzAuNy0xNC4yNyA0Ni0xNS00IDUtNiA4LTQgMTMgMTItMyAxMS0yIDE4LTQtMiA2LTMgNiAwIDE1IDguNSAyIDEzLTUgMTMtNSA0IDQgMCAxMSAwIDIwIDExIDAgMTEgMiAxNSAwLTIgOCAyIDggNSAxNCA0LTggNy01IDE0LTEyLTIgMTMgNSAxMiA2IDIxIDEwLTkgMTEtMTEgMTMtMjEtNCAxNSAyIDE3IDUgMjggNC03IDctNyA4LTE2IDEgNSAzLjk4IDcuODcgNSA2IDMtMTAgMy4zMi04LjEyIDQtNi0zIDEzIDIgMTYgNSAyNyA3LTEyIDUtMTggNS0xOSAyIDE1IDE1IDggMjggMzMgNC0xNC0xNi0zOC0yMy03My00LTIzLTMtMjgtMTQtNDMtMy03LTEwLTgtMTMtNyA4LTQgNy04IDEyLTE1IDE1LTIgMTEtNSAxNS0xMC0xIDAgNS00IDIzLTV6Ii8+CiAgICAgIDxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0yMTE5LjY2IDI3MC4zNmMwLTMtMTEtNi0yMC02LTEuMzQtMi42Ny0zLjY3LTUtNy03LTUuMzQtMi42Ny0xMi4zNC0yLjY3LTIxIDAtOCAxLTE2LTEzLTgtMjYgNy0zIDEwLTkgMTEtMTQtOC00LTExLTUtMjItNC02NSA0LTg1IDI4LTExMCA1MC04IDcgMTAgNSAxOCA1LTQyIDAtNzggNDEtNzIgMzdzMTYgNiAzNS0xMWMyLTEtNyA1LTE1IDE1IDIxLTMgMjEtNiAzOS00LTIgNyAzLjYgNy4yMiA5IDggNC4zMy42MiA5LjItLjQ0IDE1IDAgMTIuNTMgMS40IDEzLTEgMTgtMSA2IDAgNS4zNS42IDkgMCA5LTIgNy0zIDEwLTctMyA4IDEgMTEgNiAyMSA3LTYgNi0xNCA2LTE5IDAgMTMtMSA5IDIgMTcgNi01IDYtNCA4LTEyLTMgMTAtMSAxNyAzIDI4IDUgMCA2Ljg0LTQuNjYgMTAtMyAwIDUgMCAzIDYgMTMgNS01IDIgMyA3LTgtMSAxMCA0IDQgMTAgMTggNS0xMCAzLTE0LTEtMjMgNiAxMyA4IDEyIDEzIDE5IDItMTktMS0yMy03LTM2IDMtMTktNi0yMC01LTMzLjUgOC0xMC41IDE1IDIgMjQtNi41IDctMSA0LTQgOS03IDgtNSAxOSAxIDIwLTN6Ii8+CiAgICAgIDxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0yNDg1IDI3OC44NGMtNi0zLTctMS0xNi0zIDEtNS00LjY2LTEwLTExLTEwLTkuMTYgMC05LjUgNS4yLTIxIDgtOSAyLjItMTIuNyAzLjAzLTE4LTItMjQtMTUtMTEtMTktMzItNDQtOS03LTEyLTExLTQtMjEgMTMtMTQgMTctMjIgMTctMzItNC03LTg1LTMtMTEzIDM0IDUuMDYgMS4xNSAxNi44LTYuNyAyMC42NS02IDQuMzUgMS0xOC42NSAxMy05LjY1IDExIDktMiAxNS03IDIxLTcgMi42Ny0uMDUtMiAyLTMgNyAzLjc4LjkgOS44LTEuODUgMTYtMyAzLjUyLS42NSA3LjkuMzQgMTAgMC00IDMtMTAgMS0yMCAxNyA2IDUuNSAxNC0xLjUgMjAtMS41LTMgNS41LTExIDIuNS0xNSAyMC41IDIgNCAxMS02IDktMiAwIDQtNyAyLTkgMTggNiAwIDgtNyA5LTItMiAzLTUgMy01IDkgMyAzIDktNCAxMS00LTEgMi02IDItNiAxMC0zOCA5LTQ5IDE4LTY4IDMwIDcgNC45IDIzLTUgMjUtMS0xLjQ2IDMuMjItMTEgNS45LTI4IDExIDE3IDIgMzEgMiA0Mi42NS01LjEgMTAuMzUgMS4xIDE4LjU3LTEuOSAyMS4zNS0xLjkgNCA2IDAgMTMgNyAxNSAzLTUgOC0xMiA5LTE1IDMtMi01IDExIDMgMTMgOSAwIDE5IDcgMzYgNyAxOCAwIDIyLTYgNDItMTMgMTItMSAyMC01IDI1LTE4IDMtOCA5LTQgMTgtMTMgMi0yIDEyLTMgMTYtNnoiLz4KICAgICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTI4NTkgMjc1Ljc0Yy0uNTItMi4zNS04LTMtMjAtNS02LjYyLTMuMS03LjY4LTktMTQtOS0xMyAwLTcuODMgNi4xNi0yMSA5LTcuNyAxLjY3LTE1IDItMjAgMHMtNi4zMi0zLjctMTAtNmMtMTkuMi0xMS45LTEwLjE3LjI1LTE5LjE3LTIwLTEwLjU0LTEyLTEwLjYtMjQuNTUtNi44My00MiAuOTctNC41IDIuMjctOC4xNSA0LTExIDYtOS44MyAxMi42Ny0zMC42IDExLTQ1LTEuNC0xMi4xNi0xMS0xNC0yNy0xNy0yMS00LTMzLTUtNTgtMi05IDgtMjEgNS0zMyAyMSA5LTEgNy0zIDE0IDMgOC00IDE1LjQ4LTEuMyAxNi0xIDcuMTYgNC4xMy0zLjU0IDMuNzMgMSA2IDYgMCAyIDQgMCA5IDUtLjUgOC0xIDYgNCA0LjQgMy4yMiA4LjM2LTMuMjQgOSAxIC44NiA1Ljc2LTExLjcgOS40LTkgMTcgMTggMyAyMCA1IDIyIDctNCAxIDMgMi0yNiAxMSAzIDEwIDE0IDYgMTUgMTYgMCA3LTkgNC0xMiAxNyAxMiAyIDkgNiAyMyA2LTUgMC0xOCA0LTI2IDEyIDkgMiA2IDYgMTQgNyA3IDMgNiAzLjM2IDQgNy02LjUgMTEuODYtNSAxNS0yMCAyM3MtMjYuMyAxNS43OC0zNSAyMmMtNC42MyAzLjMyLTcuNDggOC4yMy0xMSAxMiAxMi0yIDEyLTMgMTUtMiAyIDQgMS0zIDAgMTEgNi01IDE2LTEyIDIyLTE2IDUgMCAxMy0zIDE3IDAgNSAwIDAtNyAwLTguOTYgMC0xLjk2IDMuNDggNS44IDUgMy45NiA1LTYgNC05IDMtMTQgNCAzIDEgMTAuOSA2IDEyIDE5IDYgMjEgNSA0Mi0xIDEuMi0uMDcgMi45NS0uOTIgNC4zLS45NiAxLjIgMS40Mi43IDMgMy43IDMuOTYgMS41Ny0yLjM1IDQuOTMtMy4wNiA2LjgzLTMuMS41MiAwLS4yNC0uOTMgMC0uODYgMTAgMyAxNy4xNyAzLjk2IDMyLjE3Ljk2IDEzLTggMjQtNSAzNS0xNyAxNC02IDE0LTEwIDE3LTE2IDQtMyA5IDAgMjAtNHoiLz4KICAgICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTMyNDMgMjg2Yy04LTMtNy0yLTE3LTQtNy42LTMuMjgtNS0xMS0yMS0xMy0xNi4xIDEuMDMtMTUgMTQtMzEgMTMtMTAuNDMtLjY1LTEzLTctMjEtMTFzLTEzLTUtMTktMTJjLTEzLTQyLTEuMjctOS41Ni0zLTU5LS4yNy03LjU2LTYtNDQtMS01NCA4LTMgNC44NC0xMy44IDAtMjItMzItMzQtNDAuMjItNTguMDMtNjAtNzktNC0xIDUgMTItMiA3LTguOC01LjA4LTctMTQtMjMtMjIgMSA1IDQgMTIgMiAxNS01LTMtMTQtMjMtMjAtMjMgMSA0IDggMTEgOCAyMyAwIDQtMTQtNi05LTFzNyAxMyA5IDE5YzcuMjUgMTMuMTggMjIgMjMgMjIgMjItMy0xLTE3LTEyLTI2LTExIDIgNSA4IDcgMTAgMTctMiAyIDAgMy04IDAgNCAxOSAxNCAyOCAzNSA0MSAyLjYgNC4yNC0xMS4xLTQuMTgtMTQtMS0yLjYgMi44MiAxLjY3IDguNiA1IDE1IDkuMTcgMTcuNiAxOC4zMiAxOC45MiAyMCAzMC0xIDQtOS43Ny0xLjI2LTE0IDItMi4yNyAxLjc0IDQuNzUgNS43NCA0IDEwLS43NSA0LjI0LTkuMjIgMS42OC04IDYgMi40OCAyLjk4LTIgMTItMSAxN3M0IDYgNCAxMSA3LTIgOCA2YzUgNC0xIDQtOCAxMiA1IDUgMTAgNCA4IDE0cy03IDYtMTIgMTJjLTUgNy0zIDExLTEwIDE3LTkgOC0xNSA0LTMxIDE2LTEzIDctMTQgMi0zMCAxMyAxOCAyIDM2IDEyIDY4IDUgNSAyLTUgNS0yIDcgMTQgMSAxNiAzIDIzIDAtNCAzLTEwLjYyIDguNy03IDkgOC41My43NCAyMy4zOC0uOTUgMzAgMCA4LjQgMS4yIDEyLjc1IDUgMjcgNSA3LjcgMCAxNi4yNS04LjE4IDIxLTcgNy4zIDEuOCA2IDIuOTMgMTcgMCAxOS4zMy01LjE1IDI0LTkgMzktMTkgOC0xMiAxMy05IDIwLTIxIDExLTIgMTgtMiAxOC01eiIvPgogICAgICA8cGF0aCBmaWxsPSIjMDAwIiBkPSJNMzU5NS4yIDI3NGMwLTIuNTYtNS00LTEzLTctNC4yNS0zLjEzIDAtOC0xMC0xMC0xNyAwLTExLjAzIDguOTgtMjEgMTItMTAtMS05LTItMjEgMS00LjE1IDEuMDQtMy45LTEwLjgtNi0xMy0yLjk3LTMuMDYtNS0zLTEwLTgtMy0xMSA2LTI0IDMtNDUtMS4zNC05LjMyLTQuNjgtMjEuNTYtOS0zMy0yLjQ1LTEzLjEtMi0xMC0xMy0yMy0yMS0yOC0zNy0zNy00Ny02Ny00Ljk2LTQuNTYtLjY4IDEyLjQ0LTUgMTEtNy42OC0yLjU2LTE1LjQtMTktMTktMTktMi45IDAgNy41IDE3LjkgNCAyMy0zIDQuNC0xNy03LjY3LTE3LTUgMCAzLjMzIDggMTYgMTUgMTktNCA0LTkuNS00LjYtMTEtMSA3IDkgMSAxMSA2IDI0IDUuNzcgMTIuMDUgMTEgOCAxNiAxOC0zLjYyIDQuMTctMjQuNS02LjgtMjYtMy0xLjAyIDIuNTMgOS43IDIuNyAxNyAxMCA2IDYgMS44IDEzLjQ4IDYgMTYgNSAzIDIgNiA4IDEzczEwLTIgOCA4Yy0uOTQgNC42Ni00IDQuMzQtNCA5IDAgNS4zNCA4LTEgNiA1IDAgMi41Ny00IDQtNiA4IDAgLjcyIDcuNTgtMS40NyA4IDEgMS4wOCA2LjUzLTcuMjMgMTEuOC00IDE3IDMuMjcgNS4zIDEyIDQgMTcgMy01IDQtMTMgMy45NS0xMyA5IDAgOS40NSAxMCAxMyA0IDE4IDIgNS01IDktNCAxM3M1LjE3IDguNDcgMTAgMTBjMy4yNCAxLjAzIDkgMiA2IDMtNiAyLTctMS0xMiAzLTQuMjUgMC0yLTYtMTAtNC0yNCA0LTYwIDIwLTczIDM0LTIgMyAxMi0zIDIxLTQtOCAzLTIwIDctNSA2IDExIDEgMjggMCA1Ny01IDIxLjQ2LS42NiAxNyA3IDM5IDIgMTEgMyAyOCA2IDQzLTUgMTQtMiAxNS41OC05Ljg1IDMzLTIzIDYtMiAxMS0xMSAxNC0xNyA3LjgtMy41MyAxMi0xIDE4LTR6Ii8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4="); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; } .bird--one { animation-duration: 1s; animation-delay: -0.5s; } .bird--two { animation-duration: 0.9s; animation-delay: -0.75s; } .bird--three { animation-duration: 1.25s; animation-delay: -0.25s; } .bird--four { animation-duration: 1.1s; animation-delay: -0.5s; } .bird-container { position: absolute; top: 20%; left: -10%; transform: scale(0) translateX(-10vw); will-change: transform; animation-name: fly-right-one; animation-timing-function: linear; animation-iteration-count: infinite; } .bird-container--one { animation-duration: 15s; animation-delay: 0; } .bird-container--two { animation-duration: 16s; animation-delay: 1s; animation-name: fly-right-two; /* Differentiate the animation for each bird container */ } .bird-container--three { animation-duration: 14.6s; animation-delay: 9.5s; animation-name: fly-right-three; /* Differentiate the animation for each bird container */ } .bird-container--four { animation-duration: 16s; animation-delay: 10.25s; animation-name: fly-right-four; /* Differentiate the animation for each bird container */ } @keyframes fly-cycle { 100% { background-position: -900px 0; } } @keyframes fly-right-one { 0% { transform: scale(0.3) translateX(-10vw); } 10% { transform: translateY(2vh) translateX(10vw) scale(0.4); } 20% { transform: translateY(0vh) translateX(30vw) scale(0.5); } 30% { transform: translateY(4vh) translateX(50vw) scale(0.6); } 40% { transform: translateY(2vh) translateX(70vw) scale(0.6); } 50% { transform: translateY(0vh) translateX(90vw) scale(0.6); } 60% { transform: translateY(0vh) translateX(110vw) scale(0.6); } 100% { transform: translateY(0vh) translateX(110vw) scale(0.6); } } @keyframes fly-right-two { 0% { transform: translateY(-2vh) translateX(-10vw) scale(0.5); } 10% { transform: translateY(0vh) translateX(10vw) scale(0.4); } 20% { transform: translateY(-4vh) translateX(30vw) scale(0.6); } 30% { transform: translateY(1vh) translateX(50vw) scale(0.45); } 40% { transform: translateY(-2.5vh) translateX(70vw) scale(0.5); } 50% { transform: translateY(0vh) translateX(90vw) scale(0.45); } 51% { transform: translateY(0vh) translateX(110vw) scale(0.45); } 100% { transform: translateY(0vh) translateX(110vw) scale(0.45); } } @keyframes fly-right-three { 0% { transform: translateY(-3vh) translateX(-10vw) scale(0.4); } 10% { transform: translateY(1vh) translateX(10vw) scale(0.35); } 20% { transform: translateY(-2vh) translateX(30vw) scale(0.55); } 30% { transform: translateY(2vh) translateX(50vw) scale(0.5); } 40% { transform: translateY(-1vh) translateX(70vw) scale(0.4); } 50% { transform: translateY(0vh) translateX(90vw) scale(0.5); } 51% { transform: translateY(0vh) translateX(110vw) scale(0.5); } 100% { transform: translateY(0vh) translateX(110vw) scale(0.5); } } @keyframes fly-right-four { 0% { transform: translateY(1vh) translateX(-10vw) scale(0.5); } 10% { transform: translateY(-1vh) translateX(10vw) scale(0.4); } 20% { transform: translateY(2vh) translateX(30vw) scale(0.6); } 30% { transform: translateY(-2vh) translateX(50vw) scale(0.5); } 40% { transform: translateY(1vh) translateX(70vw) scale(0.45); } 50% { transform: translateY(0vh) translateX(90vw) scale(0.5); } 51% { transform: translateY(0vh) translateX(110vw) scale(0.5); } 100% { transform: translateY(0vh) translateX(110vw) scale(0.5); } } </style> </head> <body> <div class="container"> <h1>SVG飞鸟动画</h1> <div class="bird-container bird-container--one"> <div class="bird bird--one"></div> </div> <div class="bird-container bird-container--two"> <div class="bird bird--two"></div> </div> <div class="bird-container bird-container--three"> <div class="bird bird--three"></div> </div> <div class="bird-container bird-container--four"> <div class="bird bird--four"></div> </div> </div> </body> </html>
No responses yet