css 如何实现一个心跳效果呢?


摘要:
下文讲述使用css代码实现一个心跳效果的方法分享,如下所示:

实现思路:
    使用animation动画实现大小变化,如下例所示:

如:

  <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>猫猫教程(maomao365.com)--实现心跳效果</title>
	<style type="text/css">
        .container {
            position: relative;
            margin: 100px;
        }
        .heart {
            position:relative;
            width: 100px;
            height: 100px;
            background: red;
            animation: hit .5s infinite alternate;
            transform: rotate(45deg);
        }
        .heart:before {
            position: absolute;
            left: -50px;
            content: '';
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            animation: hitLeft .5s infinite alternate;
        }
        .heart:after {
            position: absolute;
            top: -50px;
            content: '';
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            animation: hitTop .5s infinite alternate;
        }
        @keyframes hit
        {
            from { width: 100px; height: 100px; }
            to { width:150px; height: 150px; }
        }
        @keyframes hitTop {
            from { width: 100px; height: 100px; top: -50px; }
            to { width: 150px; height: 150px; top: -75px; }
        }
        @keyframes hitLeft {
            from { width: 100px; height: 100px; left: -50px; }
            to { width: 150px; height: 150px; left: -75px; }
        }
	</style>
</head>
<body>
<p>
 maomao365.com <br />
 css实现一个心跳效果
</p>
<hr />
    <div class="container">
        <div class="heart"></div>
    </div>
</body>
</html>
css 实现一个心跳效果

css 实现一个心跳效果