跳动的心

总结：

利用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;
} 

运行：