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

最新推荐文章于 2023-11-14 10:32:40 发布

libertyman

最新推荐文章于 2023-11-14 10:32:40 发布

阅读量875

点赞数

分类专栏： H5场景文章标签： html css js css3 javascript

本文链接：https://blog.csdn.net/libertyman/article/details/114894717

版权

H5场景专栏收录该内容

1 篇文章 0 订阅

订阅专栏

接触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场景动态电子邀请函（静态）

libertyman

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
用css的animation动画属性来实现一个H5场景动态电子邀请函

接触css的animation 也有一段时间，经常在朋友圈会看到一些很漂亮的电子邀请函，刚开始以为是视频，后来发现原来是用css的animation来实现的。经过分析，其实是利用css的animation动画播放，把很多张图片素材或者文本，有顺序的贴上去，而且每张图片或文字都添加了animation动画，这样就组成了一个类似视频的动态画面。先上图，有图有真相。这个是我利用animation实现的一个“宝宝满月”的邀请函。接下来我们将一步一步的通过代码来实现这个邀请函。首先必须要了解的是animatio
复制链接

扫一扫