先看效果：
会跳跃的哦。gif麻烦我就没弄。
完整代码：
<!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>
