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 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python中list初始化方法示例
2016/09/18 Python
Sanic框架配置操作分析
2018/07/17 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python学生信息管理系统实现代码
2019/12/17 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
个人收入证明范本
2014/01/12 职场文书
少先队入队活动方案
2014/02/08 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL