前言

对联，又称对偶、门对、春贴、春联、对子、楹联等，是写在纸、布上或刻在竹子、木头、柱子上的对偶语句。对联对仗工整，平仄协调，是一字一音的汉语独特的艺术形式。对联是中国传统文化瑰宝

今天送一副带有动效的新春对联送给大家，实现效果：

码上掘金：

实现

html部分加入一个h1标签，里面放我们想放的新春对联文字

<h1>福星高照全家福 春光耀辉满堂春</h1>
复制代码

css部分body还是老样子，将里面的元素垂直水平居中并引入一张喜庆的背景图，文字设为华文隶书

*{
  margin: 0;
  padding: 0;
}
html{
  font-size: 15px;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: '华文隶书';
  flex-direction: column;
  background: url('https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/640fb3dbcf8a4385b37792bab19f2d78~tplv-k3u1fbpfcp-watermark.image') no-repeat;
  background-size: 100% 100%;
}
复制代码

制作的几个动效都会为每一个字加上动画，所以要先为每一个字套上一个span标签，可以在html里手动给每个字添加span标签，也可以通过js来完成这个步骤

定义一个常量将h1获取回来，然后运用正则表达式，反斜号S代表搜寻每一个非空白的子元，通过replace方法替换成加上了span标签的内容

const h1 = document.querySelector('h1')
h1.innerHTML = h1.textContent.replace(/\S/g,"<span>$&</span>") 
复制代码

html部分加入四个按钮，当点击不同的按钮实现不同的动效，所以要在js里将所有按钮获取回来再透过forEach为每个按钮加入点击的事件监听器

document.querySelectorAll('button').forEach(button=>{
  button.addEventListener('click',e=>{

  })
})
复制代码

添加四个动画，分别作为跳动，放大，旋转，闪烁用，并且在js里为每个span标签添加动画延时，将所有span元素获取回来再透过forEach用setProperty()的方法将延时秒数不断累加赋值到--delay这个css变量上

@keyframes jump{
  0%,100%{
    transform: translateY(0px);
  }
  50%{
    transform: translateY(-10px);
  }
}

@keyframes pop{
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.15);
  }
}

@keyframes flip{
  0%,100%{
    transform: rotateY(0deg);
  }
  50%{
    transform: rotateY(90deg);
  }
}

@keyframes blink{
  0%,100%{
    color: inherit;
  }
  50%{
    color: #FF0000;
  }
}
复制代码

document.querySelectorAll('span').forEach((span,index)=>{
  span.style.setProperty('--delay',`${index*0.1}s`)
})
复制代码

而四个按钮都由同一个函数处理，要分辨点击了哪个按钮，要在四个按钮上加入data属性，分别设为jump，pop，flip，blink

<button data-animation="jump">跳动</button>
<button data-animation="pop">放大</button>
<button data-animation="flip">旋转</button>
<button data-animation="blink">闪烁</button>
复制代码

然后就可以透过e.target.getAttribute()获取到data属性里值，就知道点击了哪个按钮，当我们点击了按钮的时候为h1标签添加animate样式，h1类名animate的时候里面的span元素触发动画，直接将data属性里值赋值到css变量里作为动画名称，代表触发了什么动画

document.querySelectorAll('button').forEach(button=>{
  button.addEventListener('click',e=>{
    h1.style.setProperty('--animation',e.target.getAttribute('data-animation'))
    h1.classList.add('animate')
  })
})
复制代码

h1.animate span{
  animation-name: var(--animation);
  animation-duration: .4s;
  animation-timing-function: ease-in-out;
  animation-delay: var(--delay);
}
复制代码

但是在此点击按钮的时候不会再次触发动画，原因是animate这个class已经存在了，即使在添加class的前将animate这个class移除也还是不会触发动画

我们在移除animate这个class的时候立即又套用上了animate这个class，浏览器会认为并没有发生改变，也就不会重新渲染画面，解决方法是在移除class后加上void h1.offsetWidth，强制浏览器执行回流操作

document.querySelectorAll('button').forEach(button=>{
  button.addEventListener('click',e=>{
    h1.style.setProperty('--animation',e.target.getAttribute('data-animation'))

    h1.classList.remove('animate')
    void h1.offsetWidth
    h1.classList.add('animate')
  })
})
复制代码