| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>一颗跳动的心</title> <style type="text/css"> *{ margin:0 ; padding:0; } body{ background:#1a1c24; } /* 盒子 */ #heart,#echo{ position:fixed; width: 300px; height: 300px; top: 100px; left: 250px; text-align: center; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } #heart{ z-index:8; } #echo{ z-index:7; } /* 心 初始化 */ #heart::before,#heart::after,#echo::before, #echo::after{ content:""; position: absolute; top: 40px; width: 150px; height: 240px; background: #c66c75; border-radius: 150px 150px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } #heart::before,#echo::before{ left: 150px; } #heart::after,#echo::after{ left:0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } /* 一些小样式 */ #heart::after { box-shadow: inset -6px -6px 0px 6px rgba(255,255,255,0.1); } #heart::before { box-shadow: inset 6px 6px 0px 6px rgba(255,255,255,0.1); } #heart i::after{ content:"认真你就输了丶"; position: absolute; top:35%; left:15%; color: rgba(255,255,255,0.8); font-weight: 100; font-size: 30px; text-shadow: -1px -1px 0px rgba(0,0,0,0.2); z-index:10; } /* 心要动起来 */ @keyframes heartbeat { 0% { transform: scale(0.95);} 100% { transform: scale(0.95);} 50% { transform: scale(1.00);} } @-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(0.95);} 100% { -webkit-transform: scale(0.95);} 50% { -webkit-transform: scale(1.00);} } @keyframes echo { 0%{ opacity:0.1; transform: scale(1); } 100%{ opacity:0; transform: scale(1.4); } } @-webkit-keyframes echo { 0%{ opacity: 0.1; -webkit-transform: scale(1); transform: scale(1); } 100%{ opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } #heart, #echo{ -webkit-animation-duration: 2000ms; animation-duration: 2000ms; -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1.74); animation-timing-function: cubic-bezier(0, 0, 0, 1.74); -webkit-animation-delay: 500ms; animation-delay: 500ms; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-play-state: running; } #heart,#echo{ -webkit-animation-name: heartbeat; animation-name: heartbeat; } #echo{ -webkit-animation-name: echo; animation-name: echo; } </style> </head> <body> <div id="heart"> <i></i> </div> <div id="echo"> </div> </body> </html> 更多资料，进群下载哦~WEB前端学习交流群21 598399936
|