css呼吸效果实现

实现一个图片有规律的大小变化,呈现呼吸效果,怎么用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代码

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.效果展示

好了,一个简单的呼吸效果就做好了

相关推荐
FreeCultureBoy36 分钟前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom1 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom1 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom1 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom1 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua3 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI3 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室3 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript