文字效果總結


  今天總結一下文字的樣式特效。

1.移動字體(走馬燈)

<marquee>寫上你想寫的字</marquee>

效果:不停移動

marquee標簽的屬性:

direction 表示滾動的方向,值可以是left,right,up,down,默認為left 
behavior 表示滾動的方式,值可以是scroll(連續滾動)slide(滑動一次)alternate(來回滾動) 
loop 表示循環的次數,值是正整數,默認為無限循環 
scrollamount 表示運動速度,值是正整數,默認為6 
scrolldelay 表示停頓時間,值是正整數,默認為0,單位是毫秒 
align 表示元素的垂直對齊方式,值可以是top,middle,bottom,默認為middle 
bgcolor 表示運動區域的背景色,值是16進制的RGB顏色,默認為白色 
height、width 表示運動區域的高度和寬度,值是正整數(單位是像素)或百分數,默認width=100% height為標簽內元素的高度。 
hspace、vspace 表示元素到區域邊界的水平距離和垂直距離,值是正整數,單位是像素。 
onmouseover=this.stop() onmouseout=this.start() 表示當鼠標以上區域的時候滾動停止,當鼠標移開的時候又繼續滾動。

示例:

1 <marquee direction="right" behavior="alternate" scrollamount="20" scrolldelay="20" align="botton" style="
2     height: 50px;
3     color: white;
4     text-shadow: 0px 0px 20px #0cff18;
5 " bgcolor="#008f99">Up Down</marquee>

2.text-shadow特效

很多特效都是用text-shadow實現的。用過PS的可能對這個比較熟悉,就是圖層的混合選項效果。

語法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[顏色(Color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)],[顏色(color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)]... 或者 text-shadow:[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)],[x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)]...

取值:

<length>:長度值,可以是負值。用來指定陰影的延伸距離。其中X Offset是水平偏移值,Y Offset是垂直偏移值

<color>:指定陰影顏色,也可以是rgba透明色

<shadow>:陰影的模糊值,不可以是負值,用來指定模糊效果的作用距離。

可以疊加多個陰影效果,逗號分隔。

2.1陰影(重影,投影)

1 {
2 color: #f00;
3 text-shadow: 1px 1px 0px #212121;    
4 }

2.2 3D效果

使用多重陰影來達到3D的效果。

1 {
2 color: #fff;
3 text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);
4 }

2.3外發光

在2.1的基礎上,將blur加大,不設置陰影偏移。並通過多重的陰影和不同的過渡顏色實現真實感的發光效果。

1 {
2     color: #fff;
3     text-shadow: 0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816;
4 }

2.4凹陷/凸顯/浮雕

結合背景顏色,和文字顏色、陰影顏色一起來達到想要的效果。對於這一效果,不同的人體感可能有所差異,也可以疊加陰影,來達到更逼真的效果。

1 {
2     color: #222;
3     text-shadow: 0px 2px 3px #555;
4     background-color: #454545;
5 }
1 {
2 color: #ccc;
3 text-shadow: -1px -1px #fff, 1px 1px #333;
4 }
1 {
2     -webkit-background-clip: text;
3     -moz-background-clip: text;
4     background-color: red;
/* #d6d2c1 */ 5 background-clip: text; 6 color: transparent; 7 text-shadow: 0 3px 3px rgba(255,255,255,0.5); 8 }

 

2.5模糊,毛玻璃

通過設置前景色透明,然后設置blur模糊度以及顏色即可。

1 {
2 color: transparent;
3 text-shadow: 0 0 5px #000;
4 }

2.6紋理

用圖片疊加到文字上

 1 <h2 class="grunge">Grunge Effect <span></span></h2>
 2           h2.grunge {
 3                     position:relative;
 4                     color: #f06369;
 5                     background: #000;
 6                     text-shadow: 0 0 2px rgba(255,255,255,0.3), -1px -1px 0 #fcfcfc, 1px 1px 0 #ccc;
 7                 }
 8                 
 9                 h2.grunge span{
10                     position:absolute;
11                     display:block;
12                     top:0;
13                     left:0;
14                     height:100%;
15                     width:100%;
16                     background:url("images/ground.png");
17                 }

2.7補色

類似色相抖動效果

1 {
2     color: rgba(255, 179, 140,0.5);
3     text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
4 }

3圖片填充,疊加圖片

1 {
2     background: url(XXX) no-repeat left top;
3     -webkit-background-clip: text;
4     -webkit-text-fill-color: transparent;
5 }

4漸變

使用webkit-mask-image

 1 <h1><a href="#">Gradient Effect</a></h1>
 2                 h1 {
 3                     position: relative;
 4                     text-shadow: 1px 0 4px #006;
 5                     font-family: Airal;
 6                     }
 7                  h1  a {
 8                     position: absolute;
 9                     top: 0; 
10                     z-index: 2;
11                     color: #f36902;
12                     -webkit-mask-image: -webkit-gradient(linear, left top,left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
13                     text-descoration: none;
14                     }
15                  h1:after {
16                     content: "Gradient Effect";
17                     color: #000;
18                     text-shadow: 1px 1px 1px #600;
19                 }

5掃光

使用方案:動畫+漸變

 1 <div class="bg">
 2     <p class="slideShine">Welcome to xinpureZhu Blog</p>
 3 </div>
 4 .bg { 
 5     background: #000;
 6     width: 1000px;
 7     height: 300px;
 8     margin: 0 auto;
 9     padding-top: 100px;
10 }
11 
12 .slideShine {
13     width: 1000px;
14     font-family: "Microsoft YaHei";
15     font-size: 60px;
16     text-align: center;
17 
18     background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
19     -webkit-background-size: 80px;
20 
21     -webkit-background-clip: text;
22     -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
23 
24     -webkit-animation: slideShine 3s infinite;
25 }
26 
27 @-webkit-keyframes slideShine {
28     0% {
29         background-position: 0 0;
30     }
31     100% {
32         background-position: 100% 100%;
33     }
34 }

需要注意的是,有些樣式屬性是谷歌和火狐特有的,因而會有一定的兼容性問題。

其他:

帖子背景音樂:<bgsound="背景音樂地址" loop=infinite>
字體加粗:<b>寫上你想寫的字</b>
字體斜體:<i>寫上你想寫的字</i>
字體下划線: <u>寫上你想寫的字</u>
字體刪除線: <s>寫上你想寫的字</s>
字體加大: <big>寫上你想寫的字</big>

貼音樂:<embed src="音樂地址" width="寬度" height="高度" autostart=false>

貼flash: <embed src="flash地址" width="寬度" height="高度">
貼影視文件:<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>
換行:<br>
段落:<p>段落</p>
原始文字樣式:<pre>正文</pre>
換帖子背景:<body background="背景圖片地址">
固定帖子背景不隨滾動條滾動:<body background="背景圖片地址" bodybgproperties=fixed>

 

demo頁面見

https://github.com/MRlijiawei/demos/blob/master/files/%E6%96%87%E5%AD%97%E7%89%B9%E6%95%88demo.html


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: