跳动的心
总结:
利用box-shadow制作阴影立体感
html:
<style id="style-tag"></style><span id="echo"></span><span id="heart"><i></i></span>
css为:
body{ background-color: #1a1c24; color: #fff; font-size: 13px; line-height: 1.4; -webkit-font-smoothing: subpixel-antialiased;/* 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服. none——对像素低的文本比较好 subpixel-antialiased——默认值 antialiased——抗锯齿很好 */ } pre{position:fixed; width: 48%; top: 30px; bottom: 30px; left:50%; transition:left 500ms; background-color: #313744; color: #a6c3d4; border: 1px solid rgba(0,0,0,0.2); padding: 24px 12px; box-sizing: border-box; border-radius: 3px; box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1); } pre em:not(.comment) { font-style: normal; }/* 选择器匹配非指定元素/选择器的每个元素 */ .comment{ color: #707e84; } .selector{ color: #c66c75; } .selector .key { color:#c66c75; } .key{ color:#c7ccd4; } .value{ color:#d5927b;} pre { left: 50%; } #heart, #echo { /* 心形容器 */ position: fixed; width: 300px; height: 300px; top: calc(50% - 150px); left: calc(25% - 150px); text-align: center; -webkit-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; /* 一个left值为0,一个left值为width=150px */ -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);}/* box-shadow制作立体阴影 */ #heart::before {box-shadow:inset 6px 6px 0px 6px rgba(255,255,255,0.1);}/* box-shadow制作立体阴影 */ #heart i::before{content: 'MyDear'; /* i标签添加内容 */ position: absolute; z-index: 9; width: 100%; top: 35%; left: 0; font-style: normal; color: rgba(255,255,255,0.8); font-weight: 100; font-size:30px; text-shadow:-1px -1px 0px rgba(0,0,0,0.2); } @-webkit-keyframes heartbeat { 0%, 100% {-webkit-transform: scale(0.95); transform: scale(0.95);} 50% { -webkit-transform:scale(1.00); transform: scale(1.00);} } @keyframes heartbeat { 0%, 100% { transform: scale(0.95); } 50%{ transform: scale(1.00); } } @-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); } } @keyframes echo { 0% { opacity: 0.1; transform: scale(1); } 100% { opacity: 0; 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-functionP: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: paused;/* 规定动画正在运行还是暂停 paused规定动画已暂停 */ animation-play-state: paused;} #heart { -webkit-animation-name: heartbeat; animation-name: heartbeat; } #echo { -webkit-animation-name: echo; animation-name: echo; } #heart, #echo { -webkit-animation-play-state: running; /* 规定动画运行 */ animation-play-state: running; }
运行: