<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } body,html{ height: 100%; } body{ background:linear-gradient(to bottom , #ffa5a5 0%,#ffd3d3 100%); } .heart{ width: 500px; height: 500px; /*border: 1px solid green;*/ margin: 0 auto; position: relative; } .heart>div{ animation: beat 1s linear infinite ; } .left,.right{ width: 220px; height: 220px; position: absolute; border-radius: 50%; /*border: 1px solid blue ;*/ top:100px; background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%); /*background: linear-gradient(-90deg, #d5093c 0%, #F50A45 40%);*/ } .left{ left: 62px; z-index: 3; } .right{ right: 62px; } .center{ width: 210px; height: 210px; position: absolute; /*background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);*/ background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%); bottom: 100px; left: 145px; transform: rotate(45deg); } @keyframes beat { 0%{ transform: scale(1) rotate(225deg); box-shadow: 0 0 40px #d5093c; } 50%{ transform: scale(1.2) 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="heart"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>
跳动爱心
猜你喜欢
转载自www.cnblogs.com/tuziling/p/10074540.html
今日推荐
周排行