距离过年还有161天，一年一度的集五福活动也将随着春节的到来而逐渐矩形。于是，她又在可乐里找了几个“福”字，让气氛更加的喜庆。前几天研究过波纹扩散动画，正好和“福”字结合在一起。最后的效果是这样的，鼠标一动，福字顺时针一百八十度，再放大一点，就是“福到家了”的意思。

「代码发布」CSS3实现波纹扩散旋转的动画特效插图
CSS3实现波纹扩散旋转的动画特效

特别提醒，扫上面的福字更加容易得到敬业福哦，你看我就扫到了。

「代码发布」CSS3实现波纹扩散旋转的动画特效插图1

涟漪波纹扩散动画css3核心代码

.box {
	box-sizing: border-box;
	position: relative;
}
.ripple:before {
	content: "";
	animation: ripple 2s ease-out infinite;
	border: 1px solid #d8b3b3;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	position: absolute;
	opacity: 0;	
}
.ripple:after {
	content: "";
	animation: ripple 2s 1s ease-out infinite;
	border: 1px solid #d8b3b3;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	position: absolute;
	opacity: 0;	
}
@keyframes ripple {
	 0% {
		transform: scale(1.3);
		opacity: 0.4;
	}
	25% {
		transform: scale(1.8);
		opacity: 0.3;
	}
	50% {
		transform: scale(2.3);
		opacity: 0.2;
	}
	75% {
		transform: scale(2.8);
		opacity: 0.1;
	}
	100% {
		transform: scale(3.3);
		opacity: 0;
	}
}
「代码发布」CSS3实现波纹扩散旋转的动画特效插图2

在此基础上，我还可以增加鼠标移入放大效果

.box {
	transition: all 0.9s ease;
}
.ripple:hover {
	transform: scale(1.15);
}
「代码发布」CSS3实现波纹扩散旋转的动画特效插图3

鼠标移入旋转效果

.ripple:hover {
	transform: rotate(180deg);  /*顺时针旋转*/
} 
.ripple:hover {
	transform: rotate(-180deg);  /*逆时针旋转*/
}

鼠标移入放大+旋转效果

.ripple:hover {
	transform: scale(1.15) rotate(180deg);
}
「代码发布」CSS3实现波纹扩散旋转的动画特效插图4
「代码发布」CSS3实现波纹扩散旋转的动画特效插图5

鼠标移入翻转效果

.ripple:hover {
	transform: rotateX(180deg);  /*垂直翻转*/
} 
.ripple:hover {
	transform: rotateY(180deg);  /*左右翻转*/
}
「代码发布」CSS3实现波纹扩散旋转的动画特效插图6
「代码发布」CSS3实现波纹扩散旋转的动画特效插图7

最后提前祝大家新年快乐，福到博友家!

ESWINK , 版权所有丨如未注明 , 均为原创

原文标题:「代码发布」CSS3实现波纹扩散旋转的动画特效

Eswink原创声明