|
|
这个页面的效果是渐变文字，感觉挺好看的就扒下来了，不喜勿喷，个人爱好
<!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>
复制代码
|
|
默认
晚霞
雪山
粉色心情
伦敦
花卉
绿野仙踪
加州
白云
星空
薰衣草
城市
简约黑色
简约米色
龙珠
首页
