渐变文字单页HTML源码

 · 2019-5-8 · 次阅读


<!DOCTYPE html>  
<html>  
 <head>  
  <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />  
  <meta content=“IE=edge” http-equiv=“X-UA-Compatible” />  
  <title>IXHAO</title>  
  <meta content=“IXHAO” name=“description” />  
  <meta content=“IXHAO” name=“author” />  
  <link rel=“shortcut icon” href=“http://www.ixhaos.cn/favicon.ico” />   
  <style>body,div,html,small {  
  padding: 0;  
  margin: 0  
}  

html {  
  font-size: 62.5%;  
  font-family: -apple-system,BlinkMacSystemFont,“San Francisco”,“Microsoft YaHei”,“PingFang SC”,“Hiragino Sans GB”,“WenQuanYi Micro Hei”,“Segoe UI”,Roboto,Oxygen,Ubuntu,Cantarell,“Fira Sans”,“Droid Sans”,“Noto Sans”,“Helvetica Neue”,Helvetica,Arial,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol”;  
  height: 100%;  
  -webkit-text-size-adjust: 100%;  
  -moz-text-size-adjust: 100%;  
  -ms-text-size-adjust: 100%;  
  text-size-adjust: 100%  
}  

body {  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: end;  
  -ms-flex-align: end;  
  align-items: flex-end;  
  -webkit-box-pack: start;  
  -ms-flex-pack: start;  
  justify-content: flex-start;  
  -webkit-box-orient: horizontal;  
  -webkit-box-direction: reverse;  
  -ms-flex-flow: row-reverse;  
  flex-flow: row-reverse;  
  padding: 0 .5rem;  
  background: #c4c5c9;  
  -webkit-user-select: none;  
  -moz-user-select: none;  
  -ms-user-select: none;  
  user-select: none  
}  

.caption {  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
  font-size: 6vmin;  
  margin-right: .25rem;  
  letter-spacing: .25rem;  
  white-space: nowrap;  
  -webkit-box-reflect: below -.5rem linear-gradient(transparent 25%,rgba(255,255,255,.2) 100%);  
  -webkit-font-smoothing: antialiased;  
  -webkit-writing-mode: tb-rl;  
  -ms-writing-mode: tb-rl;  
  writing-mode: tb-rl  
}  

.caption+.caption {  
  margin-top: 1rem  
}  

.caption span {  
  color: #3e3f43;  
  text-shadow: 1px 1px 3px #85868a;  
  -webkit-animation: blink-span 3s infinite forwards;  
  animation: blink-span 3s infinite forwards  
}  

.caption span:nth-of-type(1) {  
  -webkit-animation-delay: .1s;  
  animation-delay: .1s  
}  

.caption span:nth-of-type(2) {  
  -webkit-animation-delay: .2s;  
  animation-delay: .2s  
}  

.caption span:nth-of-type(3) {  
  -webkit-animation-delay: .3s;  
  animation-delay: .3s  
}  

.caption span:nth-of-type(4) {  
  -webkit-animation-delay: .4s;  
  animation-delay: .4s  
}  

.caption span:nth-of-type(5) {  
  -webkit-animation-delay: .5s;  
  animation-delay: .5s  
}  

.caption span:nth-of-type(6) {  
  -webkit-animation-delay: .6s;  
  animation-delay: .6s  
}  

.caption span:nth-of-type(7) {  
  -webkit-animation-delay: .7s;  
  animation-delay: .7s  
}  

.caption span:nth-of-type(8) {  
  -webkit-animation-delay: .8s;  
  animation-delay: .8s  
}  

@-webkit-keyframes blink-span {  
  0% {  
    color: #3e3f43  
  }  

  50% {  
    color: #fff  
  }  

  100% {  
    color: #3e3f43  
  }  
}  

@keyframes blink-span {  
  0% {  
    color: #3e3f43  
  }  

  50% {  
    color: #fff  
  }  

  100% {  
    color: #3e3f43  
  }  
}  

.footer {  
  position: absolute;  
  left: 10px;  
  right: 10px;  
  bottom: 10px  
}  

.footer a {  
  font-size: 12px;  
  color: #bbb;  
  text-decoration: none;  
  text-shadow: 0 0 2px #ccc  
}  

.footer a:hover {  
  color: #aaa  
}</style>  
 </head>  
 <body>  
  <div class=“caption”>  
   <span>枪</span>  
   <span>口</span>  
   <span>瞄</span>  
   <span>准</span>  
   <span>你</span>  
   <span>的</span>  
   <span>心</span>  
   <span>脏</span>  
  </div>  
  <div class=“caption”>  
   <span>匕</span>  
   <span>首</span>  
   <span>刺</span>  
   <span>入</span>  
   <span>他</span>  
   <span>的</span>  
   <span>腹</span>  
   <span>腔</span>  
  </div>  
  <div class=“caption”>  
   <span>暗</span>  
   <span>自</span>  
   <span>庆</span>  
   <span>幸</span>  
   <span>好</span>  
   <span>在</span>  
   <span>提</span>  
   <span>防</span>  
  </div>  
  <div class=“caption”>  
   <span>殊</span>  
   <span>不</span>  
   <span>知</span>  
   <span>他</span>  
   <span>手</span>  
   <span>里</span>  
   <span>的</span>  
   <span>枪</span>  
  </div>  
  <div class=“caption”>  
   <span>装</span>  
   <span>的</span>  
   <span>是</span>  
   <span>你</span>  
   <span>最</span>  
   <span>爱</span>  
   <span>的</span>  
   <span>糖</span>  
  </div>  
 </body>  
</html>