HTML+CSS制作心跳特效的实现_F11 - 专业站长和开发者的学习网站

今天来制作一个简单的心跳效果，不需要很多代码，添加一个盒子，充分利用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)}
    }

然后我们看一下效果

在这里插入图片描述

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

<!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>