CSS3动画 - 心脏跳动

最新推荐文章于 2025-03-25 22:43:39 发布

草巾冒小子

最新推荐文章于 2025-03-25 22:43:39 发布

阅读量3.9k

点赞数 2

分类专栏： CSS 3 HTML 5

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/83113015

版权

CSS 3 同时被 2 个专栏收录

60 篇文章

订阅专栏

HTML 5

33 篇文章

订阅专栏

CSS3动画 - 心脏跳动

1. 效果图

在这里插入图片描述

2. 代码如下


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3动画 - 心脏跳动</title>
	<style type="text/css">	
		.demo {
		    width: 554px;
		    height: 474px;
		    background: url(images/heart.png) no-repeat center;
		    background-size: 100%;
		    border-radius: 8px;
		    -webkit-border-radius: 8px;
		    -o-border-radius: 8px;
		    -moz-border-radius: 8px;
		    float: left;
		    font-size: 30px;
		    text-align: center;
		    font-weight: bold;
		    border: none;
		    color: #fff;
		    cursor: pointer;
		    line-height: 70px;
		    font-family: 微软雅黑;
		}
		#heart{
		    animation: breathe 1.1s infinite;
		}
		@keyframes breathe{
		  0%{ transform: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}
	</style>
</head>
<body>
	<div id="heart" class="demo"></div>
</body>
</html>