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控制HTML元素动画效果
Feb 08 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
3种方式实现瀑布流布局小结
Sep 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网上调查系统
2006/10/09 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
python简单程序读取串口信息的方法
2015/03/13 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
python适合做数据挖掘吗
2020/06/16 Python
极简的HTML5模版
2015/07/09 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
护理不良事件检讨书
2014/02/06 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
涨价通知怎么写
2015/04/23 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
张丽莉观后感
2015/06/16 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js