用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);以正中心为圆点，旋转一圈，同时向右移动一个宽度，呈现做出动画的效果。

@keyframes twisterInUpLeft {0% {opacity: 0;-webkit-transform-origin: center center;transform-origin: center center;-webkit-transform: scale(1) translateX(100%) rotate(1turn);transform: scale(1) translateX(100%) rotate(1turn)}to {opacity: 1;-webkit-transform-origin: center center;transform-origin: center center;-webkit-transform: scale(1) translateX(0) rotate(0deg);transform: scale(1) translateX(0) rotate(0deg)}
}
@-webkit-keyframes twisterInUpLeft {//为了兼容不一样的浏览器0% {opacity: 0;-webkit-transform-origin: center center;-webkit-transform: scale(1) translateX(100%) rotate(1turn)}to {opacity: 1;-webkit-transform-origin: center center;-webkit-transform: scale(1) translateX(0) rotate(0deg)}
}

知道原理之后，其实可以发挥自己的想象力，做出非常多花哨的动作。正常网上都可以搜索到现在的动画效果，具体可以自行搜索。

这边展示一下，上面的类似百叶窗整体的动画效果吧。

以下是对应代码

<!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场景动态电子邀请函相关推荐

css 旋转 animation动画
css 旋转 animation动画 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
CSS 3D变形动画属性之逆天立方体叠加动画
上一篇, juejin.im/post/5993d9- 把立方体的盒子搭出来之后,因为怕文章又臭又长(嗯,就是没有想好玩什么效果,偏不告诉你)关于动效没有做更多的处理,只做了一个绕Y轴旋转,这篇试着做 ...
css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
css的animation动画
小例子: <!DOCTYPE html> <html><head><meta charset="utf-8"><title ...
部分iphone机型无法实现css的animation动画效果(无效, 失效)
在开发过程中, 需要写一个年报页面, 其中需要一个字体向上移动和逐显的效果. 测试时发现逐显效果都可以实现, 但是向上移动的效果安卓机型可以实现, 部分iphone机型失效. 后来实现过程中发现, 只 ...
animation停留_css animation动画属性
首先,当接触到"动画"这个词汇的时候.想到的都有哪些内容? 1.这个动画经历了多长时间 2.这个动画怎么动的?从上往下?还是从左往右? 3.这个动画动几次?无限次吗? 4.动画如果 ...
css3的animation动画属性实现闹钟左右摇摆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...

用css的animation动画属性来实现一个H5场景动态电子邀请函

用css的animation动画属性来实现一个H5场景动态电子邀请函相关推荐

最新文章

热门文章