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

原创

一起重学前端

发布于 2024-11-22 09:33:14

2540

“好事”文章推荐：有趣的AI算法

文章地址：https://cloud.tencent.com/developer/article/2469063

通过介绍ai算法在生成图片、生成视频、辅助编程、ai人机等四个领域中AI可以进行学习，它就不断去逼近甚至超越人类的水平

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

两个方案

纯CSS animate库

CSS基于animate库

利用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"
}]

在线codepen-CSS版

下面是纯css的版本：

在线codepen-CSS版

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
});

animejs库演示地址

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端