CSS
语言:
CSSSCSS
确定
p {
position: absolute;
top: 50%;
left: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0.7em 1.2em 0.54em;
border: 0.16em solid #f33050;
white-space: nowrap;
font: bold 72px sans-serif;
text-transform: uppercase;
color: #f33050;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: font-size 0.3s, text-shadow 0.3s;
transition: font-size 0.3s, text-shadow 0.3s;
}
p::before,
p::after {
content: attr(data-content);
position: absolute;
top: 0.7em;
left: 1.2em;
opacity: 0.4;
cursor: pointer;
}
p.boom {
font-size: 76px;
text-shadow: 0 0 8px;
-webkit-transition: font-size 0.3s, text-shadow 0.3s;
transition: font-size 0.3s, text-shadow 0.3s;
}
p.boom::before,
p.boom::after {
opacity: 0;
-webkit-transition: top 0.3s, left 0.3s, opacity 0.3s;
transition: top 0.3s, left 0.3s, opacity 0.3s;
}
p.boom::before {
top: 30px;
left: 40px;
}
p.boom::after {
top: 76px;
left: 116px;
}