周末闲来无事，做了一个能动的宣传页

最近在用可画（canva），制作一些素材，海报活动页面，这不情人节快到了吗？基于海报模版，设计自己的页面倒是简单，但是都是静态页面，想着能不能让页面的元素都动起来（Everybody跟我一起嗨嗨嗨!!）。

两个方案

纯CSS animate库

CSS基于animate库

1. 
   
2. 利用animate动效，给页面上所有的image和text元素加上className，借助--var全局css变量属性，给元素依次加上delay、duration、index序号、初始化信息rotate、offset、easing等等，我会在码上掘金给一个css的demo版本。CSS版本相对简单一些，只需要循环给所有元素加上对应动画，计算执行时间，延迟时间，页面就可以动起来了。
   

// 定义的数据结构 Image\Text
[{
"id": "Image/Text-xx",
"type": "Image/Text",
"name": "图片/文本",
"css": {
"top": 0,
"left": 0,
"width": 414,
"height": 736,
"zIndex": 1,
"opacity": 1,
"fontSize": 18,
},
"animationObj": {
{
"delay": 1000,
"duration": 3030,
"type": "flipInY",
"easing": '',
"index": 8,
"rotate_angle": -6.6,
"offset": -112.5,
}
},
"value": "文本内容",
"src": "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/935920813a0c4151bbf452ef3c53ab7f~tplv-k3u1fbpfcp-watermark.image"
}]

码上掘金-CSS版

下面是纯css的版本：
code.juejin.cn/pen/7123482…

JS animejs库

animejs库

使用JS的关键就是编写对应帧属性，通过时间轴timeline方法给元素加上动画。现在js版本还只是一个demo中的demo，下次再给jym，感兴趣的jy可以自己想想。

时间轴可让你将多个动画同步在一起。

默认情况下，添加到时间轴的每个动画都会在上一个动画结束时开始。

<div class="demo-content params-inheritance-demo">
<div class="line">
<div class="square shadow"></div>
<div class="square el" style="transform: translateX(0px) scale(1); opacity: 0.5;"></div>
</div>
<div class="line">
<div class="circle shadow"></div>
<div class="circle el" style="transform: translateX(7.22878e-10px) scale(1); opacity: 0.5;"></div>
</div>
<div class="line">
<div class="triangle shadow"></div>
<div class="triangle el" style="transform: translateX(2.30924px) scale(1.00924) rotate(180deg); opacity: 0.5;"></div>
</div>
</div>

<script src="https://lib.baomitu.com/animejs/3.2.1/anime.min.js"></script>

.demo-content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
width: 290px;
height: 100%;

}
.line {
width: 100%;
padding: 1px 0px;

}
.square,
.circle {
pointer-events: none;
position: relative;
width: 28px;
height: 28px;
margin: 1px;
background-color: #005bb7;
font-size: 14px;

}
.triangle {
pointer-events: none;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 14px 24px 14px;
border-color: transparent transparent #005bb7 transparent;

}
.shadow {
position: absolute;
opacity: .2;

}

var tl = anime.timeline({
targets: '.params-inheritance-demo .el',
delay: function(el, i) { return i * 200 },
duration: 500,
easing: 'easeOutExpo',
direction: 'alternate',
loop: true

});


tl

.add({
translateX: 250,
// override the easing parameter
easing: 'spring',

})

.add({
opacity: .5,
scale: 2

})

.add({
// override the targets parameter
targets: '.params-inheritance-demo .el.triangle',
rotate: 180

})

.add({
translateX: 0,
scale: 1

});

code.juejin.cn/pen/7123478…

码上掘金太卡了吧，能不能优化下