一转眼就要过年了，支付宝一年一度的集五福活动正在如火如荼的进行中，博客怎么的也得添加点喜庆元素。于是就在iconfont里面找了一些福字，来完善喜庆氛围。
前些日子研究了波纹扩散的动画，正好结合福字来做一些改变。
最终使用的效果如下，鼠标hover上去之后，福字顺时针180°，同时稍微放大一些，寓意“福到家了”。
特别提醒，扫上面的福字更加容易得到敬业福哦，你看我就扫到了。
涟漪波纹扩散动画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;
}
}
在此基础上，我还可以增加鼠标移入放大效果
.box {
transition: all 0.9s ease;
}
.ripple:hover {
transform: scale(1.15);
}
鼠标移入旋转效果
.ripple:hover {
transform: rotate(180deg); /*顺时针旋转*/
}
.ripple:hover {
transform: rotate(-180deg); /*逆时针旋转*/
}
鼠标移入放大+旋转效果
.ripple:hover {
transform: scale(1.15) rotate(180deg);
}
鼠标移入翻转效果
.ripple:hover {
transform: rotateX(180deg); /*垂直翻转*/
}
.ripple:hover {
transform: rotateY(180deg); /*左右翻转*/
}
最后提前祝大家新年快乐，福到博友家！
CSS3功能和折腾性很大，只是代码太多了。。。
可以的,我当初研究网页特效的时候也想这样,但是不会.最后用的js监听来实现角度自增减效果,而且没做好,旋转速度可以叠加….插眼,以后白嫖
我去，居然收集了这么福了..
我就点了几次，还有几张没有..随缘，不强求。
@Mr.Chou哈哈，无欲无求，玩玩也就图个热闹。
@Mr.Chou现在集福没啥挑战性，我一次性就搞齐了！
可惜的是某宝太过小家子气，集半天红包只有几块钱，还是某东大气，除夕夜随便摇一摇就到手二十多。。。。
这福字真妙啊 居然我也扫到敬业了
weisaybox 的小图片资源能替换成 fontawesome 的图标不？
@sys哈哈。运气不错。
可以替换的，我之前替换过，不过图标缺一些我想要的，就没有使用，用法也很简单。网上教程很多的。
牛啊，这么早就开始集福了啊！我这还没开始呢……
@ieu其实也不用那么急，到最后基本大家都有了。
积福的事我就没玩过，每年总是听着别人在耳边唠叨，还有兴奋着 哈
@城南牧野集五福就是一顿操作猛如虎，一看分得两块五。
这个就厉害了。。。
@公子这个只能是运气好一丢丢，反正最后大家都会有。