威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

使用css3实现波纹扩散动画特效同时配合放大、旋转、翻转效果

新年快到了,想在博客上面添加一些福字的喜庆元素,同让这些元素能动起来。于是想到了波纹效果,现在使用css3能够轻松实现波纹扩散的动画特效,使用到了CSS动画中的keyframes关键帧。同时配合放大、旋转、翻转等动作让整体效果更加丰富。
使用css3实现波纹扩散动画特效同时配合放大、旋转、翻转效果
目录
文章目录隐藏
  1. 涟漪波纹扩散动画css3核心代码
  2. 在此基础上,我还可以增加鼠标移入放大效果
  3. 鼠标移入旋转效果
  4. 鼠标移入放大+旋转效果
  5. 鼠标移入翻转效果
  6. 演示地址:

一转眼就要过年了,支付宝一年一度的集五福活动正在如火如荼的进行中,博客怎么的也得添加点喜庆元素。于是就在iconfont里面找了一些福字,来完善喜庆氛围。

前些日子研究了波纹扩散的动画,正好结合福字来做一些改变。

最终使用的效果如下,鼠标hover上去之后,福字顺时针180°,同时稍微放大一些,寓意“福到家了”。

css3波纹扩散+旋转

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

支付宝集五福

涟漪波纹扩散动画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波纹扩散

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

.box {
	transition: all 0.9s ease;
}
.ripple:hover {
	transform: scale(1.15);
}

css3波纹扩散+放大

鼠标移入旋转效果

.ripple:hover {
	transform: rotate(180deg);  /*顺时针旋转*/
} 
.ripple:hover {
	transform: rotate(-180deg);  /*逆时针旋转*/
} 
鼠标移入放大+旋转效果

.ripple:hover {
	transform: scale(1.15) rotate(180deg);
}

css3波纹扩散+放大顺时针旋转
css3波纹扩散+放大逆时针旋转

鼠标移入翻转效果

.ripple:hover {
	transform: rotateX(180deg);  /*垂直翻转*/
} 
.ripple:hover {
	transform: rotateY(180deg);  /*左右翻转*/
} 

css3波纹扩散+垂直翻转
css3波纹扩散+左右翻转

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

演示地址:

您可能还会对这些文章感兴趣!

使用css3实现波纹扩散动画特效同时配合放大、旋转、翻转效果:目前有 15 条评论

  1. 左手拨弦
    9楼
    左手拨弦:QQ浏览器 6.9.4 Mac OS X  10.15.7

    CSS3果然很厉害,直接代码实现,不用再做什么动图了。

    2023-02-24 11:10 回复
  2. Lvtu
    8楼
    LvtuSafari 15.2 Mac OS X  10.15.7

    CSS3功能和折腾性很大,只是代码太多了。。。 :neutral:

    2022-02-11 20:58 回复
  3. 酢豚
    7楼
    酢豚:Google Chrome 97.0.4692.99 Windows 10

    可以的,我当初研究网页特效的时候也想这样,但是不会.最后用的js监听来实现角度自增减效果,而且没做好,旋转速度可以叠加….插眼,以后白嫖

    2022-01-30 20:59 回复
  4. Mr.Chou
    6楼

    我去,居然收集了这么福了..
    我就点了几次,还有几张没有..随缘,不强求。

    2022-01-25 20:02 回复
    • William
      WilliamFirefox 96.0 Windows 10

      @Mr.Chou哈哈,无欲无求,玩玩也就图个热闹。

      2022-01-25 22:21 回复
    • Lvtu
      LvtuSafari 15.2 Mac OS X  10.15.7

      @Mr.Chou现在集福没啥挑战性,我一次性就搞齐了! :cool:
      可惜的是某宝太过小家子气,集半天红包只有几块钱,还是某东大气,除夕夜随便摇一摇就到手二十多。。。。

      2022-02-11 20:57 回复
  5. sys
    5楼
    sys:Firefox 100.0 Windows 10

    这福字真妙啊 居然我也扫到敬业了 :grin:
    weisaybox 的小图片资源能替换成 fontawesome 的图标不?

    2022-01-24 09:58 回复
    • William
      WilliamFirefox 96.0 Windows 10

      @sys哈哈。运气不错。
      可以替换的,我之前替换过,不过图标缺一些我想要的,就没有使用,用法也很简单。网上教程很多的。

      2022-01-25 22:21 回复
  6. 常瑞
    4楼
    常瑞:Microsoft Edge 99.0.1141.0 Windows 10

    :wink:

    2022-01-23 18:30 回复
  7. ieu
    地板
    ieu:Safari 15.2 iPhone iOS 15.2.1

    牛啊,这么早就开始集福了啊!我这还没开始呢……

    2022-01-22 08:57 回复
    • William
      WilliamFirefox 96.0 Windows 10

      @ieu其实也不用那么急,到最后基本大家都有了。

      2022-01-23 00:26 回复
  8. 城南牧野
    板凳

    积福的事我就没玩过,每年总是听着别人在耳边唠叨,还有兴奋着 哈

    2022-01-22 00:55 回复
  9. 公子
    沙发
    公子Google Chrome 80.0.3987.163 Windows 10

    这个就厉害了。。。

    2022-01-21 22:50 回复
    • William
      WilliamFirefox 96.0 Windows 10

      @公子这个只能是运气好一丢丢,反正最后大家都会有。

      2022-01-23 00:27 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry