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%;
}
總結
以上是生活随笔為你收集整理的html5文字段落特效,超炫的 HTML5 字体和文本特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 单张上传图片的方法
- 下一篇： bc --- 计算器命令