Vue项目中如何实现图片的闪烁和旋转动画功能? 发布时间:2025/01/12 html代码: <template> <div> <img :src="imageSrc" 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 ? '图片路径' : ''; } } } 复制代码 以上是编程学习网小编为您介绍的“Vue项目中如何实现图片的闪烁和旋转动画功能?”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。