html5 心跳效果,HTML5 心跳脉动式文本

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;

}