html5文字段落特效,超炫的 HTML5 字体和文本特效

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

background: black;

}

span {

margin: 0;

padding: 0;

}

.end-left {

margin-left: -235px;

}

.end-right {

margin-right: -117.5px;

}

.outline {

position: absolute;

top: 20px;

}

.outline {

color: black;

/* Will override color (regardless of order) */

-webkit-text-fill-color: transparent;

-webkit-text-stroke-width: 2px;

-webkit-text-stroke-color: orange;

font-size: 64px;

font-family: 'Arvo', serif;

}

.orbs {

font-family: 'Raleway', sans-serif;

font-weight: 100;

display: block;

font-size: 128px;

}

.orbs span {

color: red;

display: inline-block;

text-align: center;

border-radius: 50%;

text-shadow: 0 0 20px orange, 1px 1px 20px orange, 2px 2px 20px orange, -1px -1px 20px orange, -2px -2px 20px orange;

position: absolute;

left: 50%;

}

.orbs span:first-child {

margin-left: -210px;

}

.orbs span:not(:first-child) {

margin-left: -35px;

}

.glow {

opacity: 0;

font-family: 'Arvo', serif;

font-weight: 300;

color: orange;

margin-left: -222.5px;

font-size: 105px;

position: absolute;

top: 220px;

left: 50%;

}