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实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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 db类库进行数据库操作
2009/03/19 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
echarts整合多个类似option的方法实例
2018/07/10 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python单元测试简单示例
2018/07/03 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
初学者学习Python好还是Java好
2020/05/26 Python
python 下划线的不同用法
2020/10/24 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
《哪吒闹海》教学反思
2014/02/28 职场文书
校园活动策划方案
2014/06/13 职场文书
新农村建设汇报材料
2014/08/15 职场文书
教师批评与自我批评
2014/10/15 职场文书