Css的过度动画效果二

最新推荐文章于 2024-04-25 16:16:15 发布

黑猫.

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/weixin_44549398/article/details/91350540

版权

在这里插入图片描述
这是我弄的一个上下抖动的一个过度的动画效果，
我就来单的说一下吧！

<div class="con">
		<img src="images/wifi-full.png" alt="">
</div>

首先打一个div在给他一个类，然后在这个类里面打一个img标签放置一张图片。

.con img{
			transform: translateY(40px);
			animation: beating 1.0s ease infinite;
		}
		@keyframes beating{
			0%{
				transform: translateY(0px);
			}
			20%{
			 transform: translateY(40px);
			}
			40%{
				transform: translateY(15px);
			}
			60%{
				transform: translateY(40px);
			}
			80%{
				transform: translateY(30px);
			}
			100%{
				transform: translateY(40px);
			}
		}

之后就来到css写样式，首先写一个变换img里面的图片样式的最大像数值，然后在写他的一个样式调整他的一个动画的运动速度.运动曲线和运动次数，之后下面是设置他运动的关键帧从百分之零到百分之百的运动橡数，这样就完成了一个动画效果。