HTML+CSS制作心跳特效的实现


Posted in HTML / CSS onMay 26, 2021

今天来制作一个简单的心跳效果,不需要很多代码,添加一个盒子,充分利用CSS展现就可以啦。

1.首先我们在页面添加一个可视化的盒子

<body>
	<div class="heart"></div>
 </body>

2.然后给它先变成一颗心

.heart{
		position:relative;
		width:100px; 
		height:100px;
		margin:100px;
	 }
.heart:after,
.heart:before{
	position:absolute;
	width:60px;
	height:100%;
	background-color:#ff6666;
	content:"";
	border-radius:50% 50% 0 0;
}
.heart:before{
	left:0;
	transform:rotate(-52deg);
}
.heart:after{
	right:0;
	transform:rotate(49deg);
}

3.最后设置一下动画animation,这里要说一下animation必须和@keyframes一起用哦,因为动画没有动画帧还怎么动吖,就像你用筷子用两根一样,肯定不用一根对叭。

animation:scale 1s linear infinite;
           /*名称 1s 匀速 无限循环*/

我们让它水平垂直两倍缩放

@keyframes scale{   /*动画帧*/
		50%{transform:scale(2)}
	}

然后我们看一下效果

HTML+CSS制作心跳特效的实现

哈哈,有点丑,不喜欢的伙伴可以自己再去改一改外貌,毕竟个人审美有限哈哈哈,第一次写博客有点不知道怎么表达,反正过程都在这里啦,下面源代码送上~

<!doctype html>
<html>
  <head> 
  <meta charset="UTF-8">
  <title>心跳效果</title>
  <style>
	*{margin:0; padding:0;}
	li{list-style:none;}
	a{text-decoration:none;}

	.heart{
		position:relative;
		width:100px; 
		height:100px;
		margin:100px;
		animation:scale 1s linear infinite;  
		/*名称 1s 匀速 无限循环*/
	}
	@keyframes scale{   /*必须和animation一起用  动画帧*/
		50%{transform:scale(2)}
	}
	.heart:after,
	.heart:before{
		position:absolute;
		width:60px;
		height:100%;
		background-color:#ff6666;
		content:"";
		border-radius:50% 50% 0 0;
	}
	.heart:before{
		left:0;
		transform:rotate(-52deg);
	}
	.heart:after{
		right:0;
		transform:rotate(49deg);
	}
  </style>
 </head> 

 <!-- 可视化区域-->
 <body>
	<div class="heart"></div>
 </body>
</html>

到此这篇关于HTML+CSS制作心跳特效的实现的文章就介绍到这了,更多相关HTML+CSS心跳内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 #HTML / CSS
详解CSS故障艺术
HTML中的表单Form实现居中效果
May 25 #HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
CSS filter 有什么神奇用途
HTML5来实现本地文件读取和写入的实现方法
May 25 #HTML / CSS
详解CSS不受控制的position fixed
May 25 #HTML / CSS
You might like
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Vrbo英国:预订度假屋
2020/08/19 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
电子专业推荐信范文
2013/11/18 职场文书
校园文化建设方案
2014/02/03 职场文书
投标服务承诺书
2014/05/28 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Python利用FlashText算法实现替换字符串
2022/03/31 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python