网站设计培训课程,百度云网盘资源搜索引擎,移动云网站建设,seo网站优化案例实现一个图片有规律的大小变化#xff0c;呈现呼吸效果#xff0c;怎么用CSS实现这个呼吸效果呢 一.实现 CSS实现动态效果可以使用动画( animation)来属性实现#xff0c;放大缩小效果可以用transform: scale来实现#xff0c;在这基础上有了动画#xff0c;就可以设置一个… 实现一个图片有规律的大小变化呈现呼吸效果怎么用CSS实现这个呼吸效果呢 一.实现 CSS实现动态效果可以使用动画( animation)来属性实现放大缩小效果可以用transform: scale来实现在这基础上有了动画就可以设置一个在几秒内的呼吸效果了然后设置播放次数为infinite无限,就可以的到想要的效果了.animation 属性是一个简写属性它有如下几个动画属性 1.animation属性 animation-name指定要绑定到选择器keyframe的关键帧的名称(eg:testAnimation)animation-duration动画指定需要多少秒或毫秒完成(eg2s)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设置动画在启动前的延迟间隔(eg2s)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.效果展示 好了一个简单的呼吸效果就做好了
