1. 首页
  2. 前端

css3实现工作中常用动画特效代码整理与分析

1.间隔晃动效果

这种效果使用rotate旋转,并结合linear和infinite属性值以相同速度不限次的间隔旋转。此动画多使用于UI页面边栏提醒或红包摇晃提醒等,效果如下:

代码实现如下:

.shake-effect {
	animation: shake 2s linear infinite;
	transform-origin: 50% 70%;
}
@keyframes shake {
	10%,20% {
		transform: rotate(-20deg);
	}
	5%,15%,25% {
		transform: rotate(20deg);
	}
	0%,30%,100% {
		transform: rotate(0deg);
	}
}

2.永久脉冲动画

脉冲动画, 就是类似一个圆圈向外扩散的效果,多用于搜索场景。效果如下:

css3实现工作中常用动画特效代码整理与分析

代码实现如下:

.pulse-effect {
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-name: pulse;
}
@keyframes pulse {
	0% {
		transform: scaleX(1)
	}
	50% {
		transform: scale3d(1.05,1.05,1.05)
	}
	to {
		transform: scaleX(1)
	}
}

3.无限旋转

某个块儿以中心点为轴心点进行无限次的转动,这里使用rotate属性值,参数可用1turn( 1turn:一圈 ),效果如下:

代码实现如下:

.load-effect {
	animation: load 3s linear 1s infinite;
	transform-origin:50% 50%; 
}
@keyframes load {
	0% {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(1turn)
	}
}

4.奔跑的小人

使用css3实现无限次奔跑的小人,也可绘制其他图形,多用于加载时场景,效果如下:

由于该动画的css源码比较多,就不在此展示了,具体请点击查看

5.模拟逼真的3D效果

以按钮为例,纯html/css实现超逼真的3D效果,效果如下:

Not focusable

由于该动画的css源码比较多,就不在此展示了,具体请点击查看

未完待续……

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/1488

发表评论

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

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code