CSS3 闪光的金色立体文字

Shiny Gold Text。可以用来做金融类网站的标题。

shiny

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2641
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #111;
}
.shiny {
    color: #f5c21b;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5c21b), to(#d17000));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 7em;
    font-weight: 900;
    position: relative;
    text-transform: uppercase;
}
.shiny::before {
    background-position: -180px;
    -webkit-animation: flare 5s infinite;
    -webkit-animation-timing-function: linear;
    background-image: linear-gradient(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    content: "Techbrood";
    color: #fff;
    display: block;
    padding-right: 140px;
    position: absolute;
}
.shiny::after {
    content: "Techbrood";
    color: #fff;
    display: block;
    position: absolute;
    text-shadow: 0 1px #6e4414, 0 2px #6e4414, 0 3px #6e4414, 0 4px #6e4414, 0 5px #6e4414, 0 6px #6e4414, 0 7px #6e4414, 0 8px #6e4414, 0 9px #6e4414, 0 10px #6e4414;
    top: 0;
    z-index: -1;
}
.inner-shiny::after,
.inner-shiny::before {
    -webkit-animation: sparkle 5s infinite;
    -webkit-animation-timing-function: linear;
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 30px #fff, 0 0 35px #fff;
    content: "";
    display: block;
    height: 10px;
    opacity: 0.7;
    position: absolute;
    width: 10px;
}
.inner-shiny::before {
    -webkit-animation-delay: 0.2s;
    height: 7px;
    left: 0.12em;
    top: 0.8em;
    width: 7px;
}
.inner-shiny::after {
    top: 0.32em;
    right: -5px;
}
@-webkit-keyframes flare {
    0% {
        background-position: -180px;
    }
    30% {
        background-position: 500px;
    }
    100% {
        background-position: 500px;
    }
}
@-webkit-keyframes sparkle {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    40% {
        opacity: 0.8;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

HTML

Shiny Gold Text。可以用来做金融类网站的标题。

shiny

编辑器支持Emmet

快捷键

Shiny Gold Text。可以用来做金融类网站的标题。

shiny

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：