2024年06月17日 建站教程
html代码：
<template>
<div>
<img :src="/staticimageSrc" alt="图片" class="animate-image" />
<button @click="startAnimation = !startAnimation">播放动画</button>
</div>
</template>
css代码：
.animate-image {
/* 设置图片的初始状态 */
opacity: 1;
transform: rotate(0deg);
transition: opacity 1s, transform 1s;
}
.animate-image.shake {
/* 添加图片闪烁的动画效果 */
animation: shake 1s infinite;
}
@keyframes shake {
0% {
/* 初始状态 */
transform: rotate(0deg);
}
50% {
/* 图片旋转 45 度 */
transform: rotate(45deg);
opacity: 0.5;
}
100% {
/* 回到初始状态 */
transform: rotate(0deg);
opacity: 1;
}
}
.animate-image.rotate {
/* 添加图片旋转的动画效果 */
animation: rotate 3s infinite linear;
}
@keyframes rotate {
from {
/* 初始状态 */
transform: rotate(0deg);
}
to {
/* 图片顺时针旋转360度 */
transform: rotate(360deg);
}
}
js代码：
export default {
data() {
return {
startAnimation: false // 控制动画播放的变量
};
},
computed: {
imageSrc() {
return this.startAnimation ? '图片路径' : '';
}
}
}
本文链接：http://so.lmcjl.com/news/6718/