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代码

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/137632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ps人像怎么做渐隐的效果?

photoshop怎么制作人像渐隐的图片效果?渐隐效果需要使用渐变来实现,下面我们就来看看详细的教程。 首先,我们打开Photoshop,点击屏幕框选的【打开】,打开一张背景图片。 下面,我们点击左上角【文件】——【…

Exploration by random network distillation论文笔记

Exploration by Random Network Distillation (2018) 随机网络蒸馏探索 0、问题 这篇文章提出的随机网络蒸馏方法与Curiosity-driven Exploration by Self-supervised Prediction中提出的好奇心机制的区别? 猜想:本文是基于随机网络蒸馏提出的intrin…

16-nacos-快速入门

1.4.启动 启动非常简单&#xff0c;进入bin目录 然后执行命令即可&#xff1a; windows命令&#xff1a; startup.cmd -m standalone3.Nacos的依赖 父工程&#xff1a; <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-…

楼宇天台视频AI智能监管方案,时刻保障居民安全

一、背景需求分析 我们经常能看到这样的新闻报道&#xff0c;小孩登上小区的天台玩耍&#xff0c;因为家长和物业人员发现得晚&#xff0c;没有及时制止&#xff0c;结果导致意外事故的发生。此前&#xff0c;在某小区就有居民拍下多名儿童在小区高层住宅的楼顶玩耍跳跃&#…

Pytorch R-CNN目标检测-汽车car

概述 目标检测(Object Detection)就是一种基于目标几何和统计特征的图像分割,它将目标的分割和识别合二为一,通俗点说就是给定一张图片要精确的定位到物体所在位置,并完成对物体类别的识别。其准确性和实时性是整个系统的一项重要能力。 R-CNN的全称是Region-CNN(区域卷积神经…

Nginx实现tcp代理并支持TLS加密实验

Nginx源码编译 关于nginx的搭建配置具体参考笔者之前的一篇文章&#xff1a;实时流媒体服务器搭建试验&#xff08;nginxrtmp&#xff09;_如何在线测试流媒体rtmp搭建成功了吗-CSDN博客中的前半部分&#xff1b;唯一变化的是编译参数&#xff08;添加stream模块并添加其对应ss…

无线城市WiFi解决方案【完整Word】

wx供重浩&#xff1a;创享日记 获取完整无水印高清Word版 文章目录 第1章 项目背景1.1“无线城市”的定义1.2 国内外“无线城市”发展概况1.3 典型案例分析1.4 建设无线城市的必要性1.5 无线城市能为政府带来的价值 第2章 项目需求分析2.1 无线城市的现状分析2.2 无线城市的总体…

Excel中功能区的存放位置很灵活,可以根据需要隐藏或显示

在这个简短的教程中,你将找到5种快速简单的方法来恢复Excel功能区,以防丢失,并学习如何隐藏功能区,为工作表腾出更多空间。 功能区是Excel中所有操作的中心点,也是大多数可用功能和命令所在的区域。你觉得功能区占用了你太多的屏幕空间吗?没问题,只需单击鼠标,它就被隐…

Wsl2 Ubuntu在不安装Docker Desktop情况下使用Docker

目录 1. 前提条件 2.安装Distrod 3. 常见问题 3.1.docker compose 问题无法使用问题 3.1. docker-compose up报错 参考文档 1. 前提条件 win10 WSL2 Ubuntu(截止202308最新版本是20.04.xx) 有不少的博客都是建议直接安装docker desktop&#xff0c;这样无论在windows…

用栈实现队列

一、题目。 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾 int pop() 从队列的开头移除并返回元素 int peek(…

go 使用 odbc 报错 SQLSetEnvUIntPtrAttr

GitHub - alexbrainman/odbc: odbc driver written in go 在centos下使用odbc连接数据库&#xff0c;报错 SQLSetEnvUIntPtrAttr: {㠳6} ㈵″㠳4&#xff0c; unixodbc已经安装好&#xff0c;并且使用isql连接数据库没有问题&#xff0c;最后发现是 /usr/lib64/libodbc.so …

CentOS系统安装vsftpd

下载并安装vsftpd apt-get install vsftpd 安装后检查 service vsftpd status 修改配置文件(被动/匿名用户模式) vi /etc/vsftpd.conf anonymous_enableNO listenYES listen_port21 ascii_upload_enableYES ascii_download_enableYES local_enableYES guest_enable…

面试--mysql基础

1、三范式 第一范式(1NF)&#xff1a;属性不可分割&#xff0c;即每个属性都是不可分割的原子项。(实体的属性即表中的列) 第二范式(2NF)&#xff1a;满足第一范式&#xff1b;且不存在部分依赖&#xff0c;即非主属性必须完全依赖于主属性。(主属性即主键&#xff1b;完全依赖…

秋招进入尾声了,还有哪些公司和岗位可以投递?

24届秋招基本已经进入尾声了&#xff0c;接下来就是秋招补录了&#xff0c;最近在微信群看到一些同学再问哪些公司还在招人的。 在这里跟大家分享一份2024届秋招信息汇总表&#xff0c;目前已更新2000家&#xff0c;不仅有互联网公司&#xff0c;还有外企、国企、各类研究所&am…

EM@解三角形@正弦定理@余弦定理

文章目录 abstract解三角形基本原理不唯一性 正弦定理直角三角形中的情形推广锐角三角形钝角情形 小结:正弦定理 余弦定理直角三角形中的情形非直角情形小结:余弦定理公式的角余弦形式 abstract 解直角三角形问题正弦定理和余弦定理的推导 对于非直角情形,都是直角情形的推广同…

Spring底层原理学习笔记--第六讲--(Aware与InitializingBean接口及@Autowired失效分析)

Aware接口 1.Aware接口提供了一种【内置】的注入手段&#xff0c;可以注入BeanFactory&#xff0c;ApplicationContext2.InitiazingBean接口提供了一种【内置】的初始化手段3.内置的注入和初始化不收扩展功能的影响&#xff0c;总会被执行&#xff0c;因此Spring框架内部的类常…

页表和cache

页表基本原理 页表主要用来将虚拟地址映射到物理地址&#xff0c;在使用虚拟地址访问内存时&#xff0c;微处理器首先将虚拟地址拆分成页号和页内偏移量&#xff0c;然后使用页号在页表中查找对应的物理页框号&#xff0c;将物理页地址加上页内偏移量&#xff0c;得到最终的物…

IDEA高效编程快捷键

IDEA高效编程快捷键 for循环快捷键 快速生成for循环 foriTABfor (int i 0; i < ; i) {}在for循环中使用索引 iterTABfor (String s : list) {}在for循环中进行if条件判断 ifnTABif (list null) {} soutTAB快捷键 System.out.println();psfEnter快捷键 p…

arcgis 网络分析 生成可达范围/等时线

需求&#xff1a;生成从地铁站步行10分钟可达的范围面图层。 线图层预处理 在精度要求不是很高的情况下&#xff0c;可采用OSM路网&#xff0c;从中剔除不允许步行的道路类型&#xff1a;高速公路、快速路。 在路网图层中新增一个字段“步行时间”&#xff0c;用字段计算器&…

C++之map的介绍

C之map的介绍 1。定义和初始化 map可以使用一对<key, value>来初始化&#xff0c;如下所示&#xff1a; std::map<int, std::string> my_map { {1, "one"}, {2, "two"}, {3, "three"} };这将创建一个map&#xff0c;其中键是整数&…