我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛
前言
对联,又称对偶、门对、春贴、春联、对子、楹联等,是写在纸、布上或刻在竹子、木头、柱子上的对偶语句。对联对仗工整,平仄协调,是一字一音的汉语独特的艺术形式。对联是中国传统文化瑰宝
今天送一副带有动效的新春对联送给大家,实现效果:
码上掘金:
实现
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')
})
})
复制代码