跳动的心
跳动的心
by cacti xu
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:...