先看效果：
会跳跃的哦。gif麻烦我就没弄。
完整代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>完整的❤心❤</title>
</head>
<body>
<style>
.herart_box {
width: 100%;
height: 30vh;
margin: 0px 0px 0px 0px;
border: 1px solid blanchedalmond;
}
.box {
width: 33.3%;
height: 30vh;
background-color: blanchedalmond;
margin: 0px;
padding: 0px;
position: relative;
left: 33.3%;
}
.BigShowDiv {
width: 40%;
height: 20vh;
background-color: blanchedalmond;
margin: 0px;
padding: 0px;
position: relative;
top: 10%;
left: 20%;
vertical-align: middle;
animation: BigShow 1.5s infinite;
}
.heart_left,
.heart_right {
width: 35%;
height: 80%;
background-color: red;
float: left;
position: relative;
top: 10%;
}
.heart_left {
background: linear-gradient(red, hotpink, pink);
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-moz-transform: rotate(45deg);
/* Firefox */
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-o-transform: rotate(45deg);
/* Opera */
position: relative;
left: 66%;
border-radius: 45px 60px 5px 15px;
will-change: rotate;
/*阴影部分*/
box-shadow: 2px 0px 3px #7e7e7e, 0px -1px 3px pink;
}
.heart_right {
background: linear-gradient(red, hotpink, pink);
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
/* IE 9 */
-moz-transform: rotate(-45deg);
/* Firefox */
-webkit-transform: rotate(-45deg);
/* Safari 和 Chrome */
-o-transform: rotate(-45deg);
/* Opera */
position: relative;
left: 15%;
border-radius: 60px 45px 15px 5px;
will-change: rotate;
}
@keyframes BigShow {
90% {
transform-origin: center;
transform: scale(1.1, 1.1);
}
70% {
transform-origin: center;
transform: scale(1.2, 1.2);
}
}
</style>
<div style="clear: both;"></div>
<div class="herart_box">
<div class='box'>
<div class="BigShowDiv">
<div class="heart_left"></div>
<div class="heart_right"></div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</body>
</html>
