摘要：
DOCTYPEhtml˃充满爱的世界;(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?
1、PC 爱心动画（预览地址：http://www.yueqingfang.cn/heart/pc.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Red Heart</title> <style>html, body {height:100%; } body {margin:0;padding:0;background:#ffa5a5;background:linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%); } .chest {width:500px;height:500px;margin:0 auto;position:relative; } .heart {position:absolute;z-index:2;background:linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);animation:beat 0.7s ease 0s infinite normal; } .heart.center {background:linear-gradient(-45deg, #B80734 0%, #d5093c 40%);transform:scale(1) rotate(225deg); } .heart.top {z-index:3; } .side {top:100px;width:220px;height:220px;border-radius:220px; } .center {width:210px;height:210px;bottom:100px;left:145px;font-size:0;text-indent:-9999px; } .left {left:62px; } .right {right:62px; } @keyframes beat {0% { transform:scale(1) rotate(225deg);box-shadow:0 0 40px #d5093c; } 50% {transform:scale(1.1) rotate(225deg);box-shadow:0 0 70px #d5093c; } 100% {transform:scale(1) rotate(225deg);box-shadow:0 0 40px #d5093c; }} </style> </head> <body> <div class="chest"> <div class="heart left side top"></div> <div class="heart center">♥</div> <div class="heart right side"></div> </div> </body> </html>
2、H5 爱心动画（预览地址：http://www.yueqingfang.cn/heart/h5.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"content="initial-scale=1, width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1, user-scalable=no"media="(device-height: 568px)"> <title>充满爱的世界</title> <script>;(function(doc, win) { vardocEl =doc.documentElement, resizeEvt = 'orientationchange' inwindow ? 'orientationchange': 'resize', recalc = function() { varclientWidth =docEl.clientWidth; if(typeof(clientWidth) == 'number' &&clientWidth <= 750) { //手机端自适应, 基础20 docEl.style.fontSize = 20 *(clientWidth / 375) + 'px'; } else if(typeof(clientWidth) == 'number' &&clientWidth > 750) { //pc端基础为40/2 20 手机端的适配 docEl.style.fontSize = '40' + 'px'; } }; if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); recalc(); })(document, window); </script> <style>html {background:linear-gradient(to right, #ffa5a5, #fcdbdb) no-repeat;min-height:100%; } body {max-width:750px;height:100px;margin:0 auto;padding-top:6rem;height:100%; } .heart {position:relative;width:5rem;height:5rem;margin:0 auto 3.5rem;transform:rotate(135deg);background:linear-gradient(-0deg, #B80734 0%, #d5093c 40%);font-size:0;box-shadow:0 0 40px #d5093c;animation:beat 0.7s ease 0s infinite normal; } .heart:before {content:"";position:absolute;width:5rem;height:5rem;right:0rem;bottom:-2.5rem;background:linear-gradient(0deg, #F50A45 0%, #d5093c 40%);border-radius:50%;z-index:5;animation:beat-other 0.7s ease 0s infinite normal; } .heart:after {content:"";position:absolute;width:5rem;height:5rem;left:-2.5rem;top:0;background:linear-gradient(0deg, #F50A45 0%, #d5093c 40%);border-radius:50%;animation:beat-other 0.7s ease 0s infinite normal; } @keyframes beat-other {0% { box-shadow:0 0 40px #d5093c; }50% {box-shadow:0 0 70px #d5093c; }100% {box-shadow:0 0 40px #d5093c; }} @keyframes beat {0% { transform:scale(1) rotate(135deg);box-shadow:0 0 40px #d5093c; }50% {transform:scale(1.1) rotate(135deg);box-shadow:0 0 70px #d5093c; }100% {transform:scale(1) rotate(135deg);box-shadow:0 0 40px #d5093c; }} </style> <style>.heart-title {padding:0 0.2rem 0;text-align:center;font-size:1rem;line-height:1.8rem; } </style> </head> <body> <div class="heart"> ♥ </div> </body> </html>
3、其他预览扩展