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

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！