效果如图：
主要由文字和背景两部分组成。背景为蓝色由左向右渐变透明，截图只截了前半截。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>恭喜发财</title>
<style>
/*文字*/
.tit{
position:fixed;
left:20px;
top:10px;
z-index: :100;
}
.antzone{
display:inline-block;
font-size:42px;
line-height:42px;
color:#fff;
position:relative;
overflow:hidden;
white-space:pre;
}
.antzone:before{
position:absolute;
left:0;
top:0;
color:#1571FA;
display:block;
height:50%;
content:attr(data-content);
overflow:hidden;
}
/*蓝色背景*/
.tit-bg{
margin-top:30px;
width:100%;
height:30px;
z-index:1;
background-color:#1571FA;
opacity: 1.0;
filter: alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
/* rgba(r,g,b,不透明度 0.0完全透明，1.0完全不透明)*/
background: -moz-linear-gradient(right, rgba(21, 113, 250,0.0) 0%, rgba(21, 113, 250,0.4) 30%, rgba(21, 113, 250,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, right bottom, right top, color-stop(0%,rgba(21, 113, 250,0.0)), color-stop(30%,rgba(21, 113, 250,0.4)), color-stop(100%,rgba(21, 113, 250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(right, rgba(21, 113, 250,0.0) 0%,rgba(21, 113, 250,0.4) 30%,rgba(21, 113, 250,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(right, rgba(21, 113, 250,0.0) 0%,rgba(21, 113, 250,0.4) 30%,rgba(21, 113, 250,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(right, rgba(21, 113, 250,0.0) 0%,rgba(21, 113, 250,0.4) 30%,rgba(21, 113, 250,1) 100%); /* IE10+ */
background: linear-gradient(right, rgba(21, 113, 250,0.0) 0%,rgba(21, 113, 250,0.4) 30%,rgba(21, 113, 250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8087e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<div class="tit">
<span class="antzone" data-content="恭">恭</span>
<span class="antzone" data-content="喜">喜</span>
<span class="antzone" data-content="发">发</span>
<span class="antzone" data-content="财">财</span>
</div>
<div class="tit-bg"></div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
