一转眼就要过年了,支付宝一年一度的集五福活动正在如火如荼的进行中,博客怎么的也得添加点喜庆元素。于是就在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其实也不用那么急,到最后基本大家都有了。
积福的事我就没玩过,每年总是听着别人在耳边唠叨,还有兴奋着 哈
@城南牧野集五福就是一顿操作猛如虎,一看分得两块五。
这个就厉害了。。。
@公子这个只能是运气好一丢丢,反正最后大家都会有。