CSS 实现图片旋转和水波纹动画效果
背景
通过 CSS 动画实现图片旋转和水波纹动画效果，并做成 Vue 组件，方便以后复用。
代码
<template><view class="container"><view class="rotate-container"><view class="dot"><van-image :image-class="rotateActive" round width="150" height="150" :src="src"></van-image><view :class="{pulse: rotate, p1: rotate}"></view><view :class="{pulse: rotate, p2: rotate}"></view></view></view><view class="info-container"><view class="song-name">{{songName}}</view><view class="author-name">{{authorName}}</view></view></view></template><script>export default {name: 'RotateImage',props: {rotate: {type: Boolean,default: true},src: {type: String,default: '/vant/cat.jpeg'},songName: {type: String,default: '告白气球'},authorName: {type: String,default: '周杰伦'}},computed: {rotateActive() {return this.rotate ? 'rotate' : ''}},data() {return {}},methods: {}}</script><style>.container {display: flex;flex-direction: column;align-items: center;position: relative;}.dot {position: relative;}/* --- 水波纹动画 start --- */.pulse {position: absolute;width: 150px;height: 150px;left: 0;top: 0;border: 3rpx solid #ffd213;border-radius: 50%;opacity: 0;}.p1 {animation: warn 2s ease-out infinite;}.p2 {animation: warn2 2s ease-out infinite;}@keyframes warn {0% {transform: scale(1.2);opacity: 0.0;}25% {transform: scale(1.2);opacity: 0.1;}50% {transform: scale(1.5);opacity: 0.3;}75% {transform: scale(1.8);opacity: 0.5;}100% {transform: scale(2);opacity: 0.0;}}@keyframes warn2 {0% {transform: scale(1.2);opacity: 0.0;}25% {transform: scale(1.2);opacity: 0.1;}50% {transform: scale(1.2);opacity: 0.3;}75% {transform: scale(1.5);opacity: 0.5;}100% {transform: scale(1.8);opacity: 0.0;}}/* --- 水波纹动画 end --- *//* --- 图片旋转动画 start --- */@-webkit-keyframes rotation {from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}/* 旋转 */.rotate {display: inline-block;-webkit-transform: rotate(360deg);animation: rotation 8s linear infinite;-moz-animation: rotation 8s linear infinite;-webkit-animation: rotation 8s linear infinite;-o-animation: rotation 8s linear infinite;animation-play-state: running;}/* 清除旋转 */.stop-rotate {-webkit-transform: rotate(0deg);animation: rotation 0s linear infinite;-moz-animation: rotation 0s linear infinite;-webkit-animation: rotation 0s linear infinite;-o-animation: rotation 0s linear infinite;animation-play-state: paused;}/* --- 图片旋转动画 end --- */.info-container {display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 1em;}.author-name {font-size: small;color: #999999;}</style>
