CSS 实现图片旋转和水波纹动画效果

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: 'https://img.yzcdn.cn/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>

效果

---