目录
一转眼就要过年了,支付宝一年一度的集五福活动正在如火如荼的进行中,博客怎么的也得添加点喜庆元素。于是就在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果然很厉害,直接代码实现,不用再做什么动图了。
CSS3功能和折腾性很大,只是代码太多了。。。
可以的,我当初研究网页特效的时候也想这样,但是不会.最后用的js监听来实现角度自增减效果,而且没做好,旋转速度可以叠加….插眼,以后白嫖
我去,居然收集了这么福了..
我就点了几次,还有几张没有..随缘,不强求。
@Mr.Chou哈哈,无欲无求,玩玩也就图个热闹。
@Mr.Chou现在集福没啥挑战性,我一次性就搞齐了!
可惜的是某宝太过小家子气,集半天红包只有几块钱,还是某东大气,除夕夜随便摇一摇就到手二十多。。。。
这福字真妙啊 居然我也扫到敬业了
weisaybox 的小图片资源能替换成 fontawesome 的图标不?
@sys哈哈。运气不错。
可以替换的,我之前替换过,不过图标缺一些我想要的,就没有使用,用法也很简单。网上教程很多的。
牛啊,这么早就开始集福了啊!我这还没开始呢……
@ieu其实也不用那么急,到最后基本大家都有了。
积福的事我就没玩过,每年总是听着别人在耳边唠叨,还有兴奋着 哈
@城南牧野集五福就是一顿操作猛如虎,一看分得两块五。
这个就厉害了。。。
@公子这个只能是运气好一丢丢,反正最后大家都会有。