实现一个图片有规律的大小变化,呈现呼吸效果,怎么用CSS实现这个呼吸效果呢
一.实现
CSS实现动态效果可以使用动画( animation)来属性实现,放大缩小效果可以用transform: scale来实现,在这基础上有了动画,就可以设置一个在几秒内的呼吸效果了,然后设置播放次数为infinite(无限),就可以的到想要的效果了.animation 属性是一个简写属性,它有如下几个动画属性
1.animation属性
animation-name:指定要绑定到选择器keyframe的关键帧的名称(eg:testAnimation)
animation-duration:动画指定需要多少秒或毫秒完成(eg:2s)
animation-timing-function:设置动画将如何完成一个周期(动画的速度曲线) ,取值如下:
linear 动画从头到尾的速度是相同的。 ease 默认,动画以低速开始,然后加快,在结束前变慢 ease-in 动画以低速开始 ease-out 动画以低速结束 ease-in-out 动画以低速开始和结束 steps(int,start|end) 指定了时间函数中的间隔数量(步长)。有两个参数,第一个参数指定函数的间隔数,该参数是一个正整数(大于 0)。 第二个参数是可选的,表示动画是从时间段的开头连续还是末尾连续。含义分别如下:
- start:表示直接开始
- end:默认值,表示戛然而止
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值 animation-delay:设置动画在启动前的延迟间隔(eg:2s)
animation-iteration-count:定义动画的播放次数
n 一个数字,定义应该播放多少次动画 infinite 指定动画应该播放无限次(永远) animation-direction:指定是否应该轮流反向播放动画(先执行一遍动画,然后再反向执行一遍动画)
2.语法
animation: name duration timing-function delay iteration-count direction;
二.案例演示
1.CSS代码
.test{
width: 200px;
height: 200px;
background-image:url("../src/assets/test.png");
background-repeat: no-repeat;
background-size: contain;
//可以直接使用animation设置
animation: testAnimation 2s ease-in-out infinite;
//也可以单独使用对应的属性设置
animation-name: testAnimation;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes testAnimation {
0%{
transform: scale(0.88);
}
50%{
transform: scale(1);
}
100%{
transform: scale(0.88);
}
}
2.效果展示
好了,一个简单的呼吸效果就做好了