用css的animation动画属性来实现一个H5场景动态电子邀请函
生活随笔
收集整理的這篇文章主要介紹了
用css的animation动画属性来实现一个H5场景动态电子邀请函
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
接觸css的animation 也有一段時間，經常在朋友圈會看到一些很漂亮的電子邀請函，剛開始以為是視頻，后來發現原來是用css的animation來實現的。經過分析，其實是利用css的animation動畫播放，把很多張圖片素材或者文本，有順序的貼上去，而且每張圖片或文字都添加了animation動畫，這樣就組成了一個類似視頻的動態畫面。
先上圖，有圖有真相。這個是我利用animation實現的一個“寶寶滿月”的邀請函。
查看示例
接下來我們將一步一步的通過代碼來實現這個邀請函。
首先必須要了解的是animation屬性：
animation-name 規定需要綁定到選擇器的 keyframe 名稱。。
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function 規定動畫的速度曲線。
animation-delay 規定在動畫開始之前的延遲。
animation-iteration-count 規定動畫應該播放的次數。
animation-direction 規定是否應該輪流反向播放動畫。
這6個動畫屬性，就是組成動畫的基本要素。
有時候還會用到以下2個屬性
animation-fill-mode 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
animation-play-state 指定動畫是否正在運行或已暫停。
也可以簡寫為
animation: name duration timing-function delay iteration-count direction;
例如：
animation: twisterInUpLeft 1.5s ease 1.7s 1 normal both;
twisterInUpLeft （name）：動畫名稱
1.5s（duration）：動畫執行時間為1.5s
ease（timing-function）：規定動畫的速度曲線
1.7s （delay） ：在動畫開始之前的延遲1.7s
1（iteration-count） ：循環執行1次
both （fill-mode） ：動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴展動畫屬性。
normal （direction ） ：動畫按正常播放
現在解釋一下twisterInUpLeft ，就是動畫名稱，這樣css才知道你要執行什么動畫。
首先你需要定義twisterInUpLeft 動畫的執行效果，如下所示，名稱隨意定，twisterInUpLeft 只是個人喜歡，好記就行。
twisterInUpLeft 中聲明了，在1.5s時間內執行的動作,即translateX(100%) rotate(1turn);以正中心為圓點，旋轉一圈，同時向右移動一個寬度，呈現做出動畫的效果。
知道原理之后，其實可以發揮自己的想象力，做出非常多花哨的動作。正常網上都可以搜索到現在的動畫效果，具體可以自行搜索。
這邊展示一下，上面的類似百葉窗整體的動畫效果吧。
以下是對應代碼
<!DOCTYPE html> <html lang="en"> <head><title></title><meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=320, initial-scale=1,maximum-scale=1, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link href="css/preview790.css?23" rel="stylesheet"><style></style> </head><script type="text/javascript" charset="utf-8">var secenInfo={name:'滿月',music:true,morePage:true,//previewJS:true,};</script> <body > <div id="app" style="height: 100%;"><div class="nbb_pc_wrap"><section class="phone_panel" style="left: 35%;"><div class="phone_box"><div class="top"></div><div class="scene_title_baner"><h1 class="scene_title">滿月</h1></div><section class="nr"><section class="nbb_main"><section style="height: 486px;" class="all_page_list"><div class="page_wrap" id="gridDemo"><section id="page3157253" class="main_page" data-pageid="3157253" copy-pageid="3157253" copypagestate="" data-pagenum="0" style="display: block;"><section class="layer"><ul class="element-item" id="item3157253"><li class="" id="item3056261ele3108836362" data-elemnum="0" ctype="4" style="width: 19px; height: 620px; left: 0px; top: -67px; z-index: 1; transform: rotateZ(0deg); opacity: 1;"><div id="item3056261animation3108836362" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 0s 1 normal both"><section class="element-wrap" id="item3056261wrap3108836362" style="width: 19px; height: 620px; top: -67px; left: 0px; color: rgb(103, 103, 103); opacity: 1; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 1;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img3108836362" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele2294285507" data-elemnum="1" ctype="4" style="width: 19px; height: 620px; left: 18px; top: -67px; z-index: 2; transform: rotateZ(0deg); opacity: 0.6;"><div id="item3056261animation2294285507" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 0.1s 1 normal both"><section class="element-wrap" id="item3056261wrap2294285507" style="width: 19px; height: 620px; top: -67px; left: 18px; color: rgb(103, 103, 103); opacity: 0.6; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 2;"><img draggable="false" src="./img/FimN9TvsyaXhguzqMSKr44NwqF1t.png" class="element comp_img" id="item3056261img2294285507" style="width: 19px; height: 620px; margin-left: 0px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele2992549212" data-elemnum="2" ctype="4" style="width: 19px; height: 620px; left: 36px; top: -67px; z-index: 3; transform: rotateZ(0deg); opacity: 0.9;"><div id="item3056261animation2992549212" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 0.2s 1 normal both"><section class="element-wrap" id="item3056261wrap2992549212" style="width: 19px; height: 620px; top: -67px; left: 36px; color: rgb(103, 103, 103); opacity: 0.9; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 3;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img2992549212" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele2246233596" data-elemnum="3" ctype="4" style="width: 19px; height: 620px; left: 54px; top: -67px; z-index: 4; transform: rotateZ(0deg); opacity: 0.65;"><div id="item3056261animation2246233596" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 0.3s 1 normal both"><section class="element-wrap" id="item3056261wrap2246233596" style="width: 19px; height: 620px; top: -67px; left: 54px; color: rgb(103, 103, 103); opacity: 0.65; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 4;"><img draggable="false" src="./img/FimN9TvsyaXhguzqMSKr44NwqF1t.png" class="element comp_img" id="item3056261img2246233596" style="width: 19px; height: 620px; margin-left: 0px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele4024059857" data-elemnum="4" ctype="4" style="width: 19px; height: 620px; left: 72.5px; top: -67px; z-index: 5; transform: rotateZ(0deg); opacity: 0.8;"><div id="item3056261animation4024059857" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 0.4s 1 normal both"><section class="element-wrap" id="item3056261wrap4024059857" style="width: 19px; height: 620px; top: -67px; left: 72.5px; color: rgb(103, 103, 103); opacity: 0.8; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 5;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img4024059857" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele354601553" data-elemnum="5" ctype="4" style="width: 19px; height: 620px; left: 90.5px; top: -67px; z-index: 6; transform: rotateZ(0deg); opacity: 0.7;"><div id="item3056261animation354601553" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 0.5s 1 normal both"><section class="element-wrap" id="item3056261wrap354601553" style="width: 19px; height: 620px; top: -67px; left: 90.5px; color: rgb(103, 103, 103); opacity: 0.7; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 6;"><img draggable="false" src="./img/FimN9TvsyaXhguzqMSKr44NwqF1t.png" class="element comp_img" id="item3056261img354601553" style="width: 19px; height: 620px; margin-left: 0px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele8191578089" data-elemnum="6" ctype="4" style="width: 19px; height: 620px; left: 107.5px; top: -67px; z-index: 7; transform: rotateZ(0deg); opacity: 0.7;"><div id="item3056261animation8191578089" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 0.6s 1 normal both"><section class="element-wrap" id="item3056261wrap8191578089" style="width: 19px; height: 620px; top: -67px; left: 107.5px; color: rgb(103, 103, 103); opacity: 0.7; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 7;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img8191578089" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele642521125" data-elemnum="7" ctype="4" style="width: 18.5px; height: 620px; left: 125.5px; top: -67px; z-index: 8; transform: rotateZ(0deg); opacity: 0.75;"><div id="item3056261animation642521125" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 0.7s 1 normal both"><section class="element-wrap" id="item3056261wrap642521125" style="width: 18.5px; height: 620px; top: -67px; left: 125.5px; color: rgb(103, 103, 103); opacity: 0.75; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 8;"><img draggable="false" src="./img/FvnFFaJrHkdzboyAsQjg2YJzEDTW.png" class="element comp_img" id="item3056261img642521125" style="width: 18.5075px; height: 620px; margin-left: -0.00373134px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele6326353998" data-elemnum="8" ctype="4" style="width: 19px; height: 620px; left: 144px; top: -67px; z-index: 9; transform: rotateZ(0deg); opacity: 0.6;"><div id="item3056261animation6326353998" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 0.8s 1 normal both"><section class="element-wrap" id="item3056261wrap6326353998" style="width: 19px; height: 620px; top: -67px; left: 144px; color: rgb(103, 103, 103); opacity: 0.6; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 9;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img6326353998" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele607042006" data-elemnum="9" ctype="4" style="width: 19px; height: 620px; left: 162px; top: -67px; z-index: 10; transform: rotateZ(0deg); opacity: 0.8;"><div id="item3056261animation607042006" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 0.9s 1 normal both"><section class="element-wrap" id="item3056261wrap607042006" style="width: 19px; height: 620px; top: -67px; left: 162px; color: rgb(103, 103, 103); opacity: 0.8; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 10;"><img draggable="false" src="./img/Fllw5LftBjfJw4x_JfMaEuGfckGs.png" class="element comp_img" id="item3056261img607042006" style="width: 19px; height: 620px; margin-left: 0px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele405417253" data-elemnum="10" ctype="4" style="width: 19px; height: 620px; left: 180px; top: -67px; z-index: 11; transform: rotateZ(0deg); opacity: 0.5;"><div id="item3056261animation405417253" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 1s 1 normal both"><section class="element-wrap" id="item3056261wrap405417253" style="width: 19px; height: 620px; top: -67px; left: 180px; color: rgb(103, 103, 103); opacity: 0.5; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 11;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img405417253" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele5467566914" data-elemnum="11" ctype="4" style="width: 19px; height: 620px; left: 197.5px; top: -67px; z-index: 12; transform: rotateZ(0deg); opacity: 0.85;"><div id="item3056261animation5467566914" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 1.1s 1 normal both"><section class="element-wrap" id="item3056261wrap5467566914" style="width: 19px; height: 620px; top: -67px; left: 197.5px; color: rgb(103, 103, 103); opacity: 0.85; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 12;"><img draggable="false" src="./img/FnXwJ-BtVri5WHw6yzKUPE8zX5tP.png" class="element comp_img" id="item3056261img5467566914" style="width: 19px; height: 620px; margin-left: 0px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele4474931896" data-elemnum="12" ctype="4" style="width: 19px; height: 620px; left: 216.5px; top: -67px; z-index: 13; transform: rotateZ(0deg); opacity: 0.4;"><div id="item3056261animation4474931896" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 1.2s 1 normal both"><section class="element-wrap" id="item3056261wrap4474931896" style="width: 19px; height: 620px; top: -67px; left: 216.5px; color: rgb(103, 103, 103); opacity: 0.4; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 13;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img4474931896" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele7173617254" data-elemnum="13" ctype="4" style="width: 19px; height: 620px; left: 234.5px; top: -67px; z-index: 14; transform: rotateZ(0deg); opacity: 0.9;"><div id="item3056261animation7173617254" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 1.3s 1 normal both"><section class="element-wrap" id="item3056261wrap7173617254" style="width: 19px; height: 620px; top: -67px; left: 234.5px; color: rgb(103, 103, 103); opacity: 0.9; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 14;"><img draggable="false" src="./img/Fh0zlfPt6EGuoCuUJrbN4B3srxHo.png" class="element comp_img" id="item3056261img7173617254" style="width: 19px; height: 620px; margin-left: 0px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele8435033648" data-elemnum="14" ctype="4" style="width: 19px; height: 620px; left: 251px; top: -67px; z-index: 15; transform: rotateZ(0deg); opacity: 0.3;"><div id="item3056261animation8435033648" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 1.4s 1 normal both"><section class="element-wrap" id="item3056261wrap8435033648" style="width: 19px; height: 620px; top: -67px; left: 251px; color: rgb(103, 103, 103); opacity: 0.3; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 15;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img8435033648" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele8196376198" data-elemnum="15" ctype="4" style="width: 19px; height: 620px; left: 269px; top: -67px; z-index: 16; transform: rotateZ(0deg); opacity: 0.95;"><div id="item3056261animation8196376198" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 1.5s 1 normal both"><section class="element-wrap" id="item3056261wrap8196376198" style="width: 19px; height: 620px; top: -67px; left: 269px; color: rgb(103, 103, 103); opacity: 0.95; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 16;"><img draggable="false" src="./img/Fh0zlfPt6EGuoCuUJrbN4B3srxHo.png" class="element comp_img" id="item3056261img8196376198" style="width: 19px; height: 620px; margin-left: 0px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele9080513634" data-elemnum="16" ctype="4" style="width: 19px; height: 620px; left: 286.5px; top: -67px; z-index: 17; transform: rotateZ(0deg); opacity: 0.2;"><div id="item3056261animation9080513634" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 1.6s 1 normal both"><section class="element-wrap" id="item3056261wrap9080513634" style="width: 19px; height: 620px; top: -67px; left: 286.5px; color: rgb(103, 103, 103); opacity: 0.2; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 17;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img9080513634" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li><li class="" id="item3056261ele941997924" data-elemnum="17" ctype="4" style="width: 19px; height: 620px; left: 304.5px; top: -67px; z-index: 18; transform: rotateZ(0deg); opacity: 1;"><div id="item3056261animation941997924" class="element-box-contents animated" data-animnum="0" style="animation: twisterInUpLeft 1.5s ease 1.7s 1 normal both"><section class="element-wrap" id="item3056261wrap941997924" style="width: 19px; height: 620px; top: -67px; left: 304.5px; color: rgb(103, 103, 103); opacity: 1; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 18;"><img draggable="false" src="./img/Fh0zlfPt6EGuoCuUJrbN4B3srxHo.png" class="element comp_img" id="item3056261img941997924" style="width: 19px; height: 620px; margin-left: 0px; margin-top: 0px;"></section></div></li></ul></section></section></div></section><section class="bgm_btn rotate" id="btn_Audio" style="display: block;"><audio src="" id="nbwAudio" preload="preload" autoplay="autoplay" loop="loop"></audio></section></section></section><div class="bottom"></div></div><div class="ctrl_panel"><a id="pre_page" class="pre_btn btn">上一頁</a><a id="next_page" class="next_btn btn">下一頁</a></div></section></div> </div><script src="js/jquery-3.4.1.min.js"></script><script src="js/preview.js"></script> </body> </html>查看實例
這邊只展示了類似百葉窗的動畫效果，如下所示是，單個圖片素材的代碼核心部分，所有的圖片素材都可以添加不同動畫。合起來就是一個動態播放的界面。
<li class="" id="item3056261ele3108836362" data-elemnum="0" ctype="4" style="width: 19px; height: 620px; left: 0px; top: -67px; z-index: 1; transform: rotateZ(0deg); opacity: 1;"><div id="item3056261animation3108836362" class="element-box-contents animated" data-animnum="0" style="animation: zoomIn 2s ease 0s 1 normal both"><section class="element-wrap" id="item3056261wrap3108836362" style="width: 19px; height: 620px; top: -67px; left: 0px; color: rgb(103, 103, 103); opacity: 1; transform: rotateZ(0deg); text-align: left; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; padding-bottom: 0px; padding-top: 0px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px; line-height: 1; z-index: 1;"><img draggable="false" src="./img/Fjo8dvXshkWZyzknAKoljjGXatSZ.png" class="element comp_img" id="item3056261img3108836362" style="width: 320px; height: 620px; margin-left: -150.5px; margin-top: 0px;"></section></div></li>這邊頁面都是靜態html，正常開發是不會這么用，靜態生成html本身會耗費寶貴的服務器資源，所以，目前比較常見的是js+json的方式動態生成頁面。
流程是：用戶訪問頁面時，瀏覽器動態獲取到邀請函對應的json數據，json數據里記錄了圖片素材或文字的基本信息，如，width、height、top、left、圖片的src資源url以及animation的信息。js根據json數據把圖片一張張貼上去，之后播放出來就行了。
后續我會繼續分享，如何用js+json做成動態生成頁面，可以添加音樂，可以實現多頁，以及自動播放等功能。
源代碼下載：用css的animation動畫屬性來實現一個H5場景動態電子邀請函（靜態）
總結
以上是生活随笔為你收集整理的用css的animation动画属性来实现一个H5场景动态电子邀请函的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 红包接口开发_java调用微信
- 下一篇： 编程语言入门YC创始人Paul Grah