Html
    Css
    Js

    
                        
body {
     background: #1d3864;
 }

 .content {
     min-height: 100vh;
     background: #186b75;
     padding: 5em 5em;
     width: 60em;
     margin: 0 auto;
     border-radius: 0.8em;
 }

 .row {
     margin-bottom: 2.4em;
 }

 pre {
     background: #000;
     padding: 0;
     border: 0;
 }

 .hljs {
     white-space: normal;
     text-align: left;
     font-size: 1.6rem;
     padding: 0 2em;
     padding: 0.5em 2em;
 }

 .textbox {
     padding: .8em 1em;
     font-size: 2em;
 }
 /* */

 .text1-1 {
     background: #434d56;
     color: #8c99a6;
     text-shadow: 0 -1px 1px black;
 }
 /* */

 .text2-1 {
     background-color: #fff;
 }

 .text2-1 p {
     font-weight: bold;
     font-size: 1.4em;
     color: transparent;
     background-color: #000;
     text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px, rgba(255, 255, 255, 0.2) 1px 3px 3px;
     -webkit-background-clip: text;
 }
 /* */

 .text1-2 {
     background: #191919;
     color: #ffc;
     text-shadow: 0 0 .1em, 0 0 .3em;
 }
 /* */

 .text1-3 {
     color: #fff;
     background: hsl(0, 50%, 45%);
     text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black;
 }
 /* */

 .text3-1 {
     background: #191919;
 }

 .text3-1 p {
     background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
     -webkit-background-size: 1em;
     -webkit-background-clip: text;
     -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
     -webkit-animation: slideShine 3s infinite;
 }

 @-webkit-keyframes slideShine {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: 100% 100%;
     }
 }
 /* */

 .text4-1 {
     color: #000;
     -webkit-animation-name: fadeIn;
     /*动画名称*/
     -webkit-animation-duration: 5s;
     /*动画持续时间*/
     -webkit-animation-iteration-count: 1000;
     /*动画次数*/
     -webkit-animation-delay: 0s;
     /*延迟时间*/
 }

 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

常用文字效果

1