Css不朽的经典神话 3D文字特殊效果推荐

啊煜煜煜煜丶

啊煜煜煜煜丶

2016-02-19 19:35

想要天天向上,就要懂得享受学习。图老师为大家推荐Css不朽的经典神话 3D文字特殊效果推荐,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

  Css不朽的经典—3D文字特效——这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left: -200px位置上形成的。

  效果:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  

  源代码:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

style type="text/css"
!--
.sample
 font-style: italic; font-family: arial black;font-size: 40px; font-weight: bold; cursor: hand;
--
/style
titleCss不朽的经典—3D文字特效/title
div
h23D Text/h2
p以下是一个用了blur滤镜而另一个没用的叠加效果/p
p onClick="alert(this.innerHTML)" span class="sample"
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
Ttop.cn/spanspan class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"
Ttop.cn/span /p
h2Glass Text/h2
p这个是两个都用了alpha滤镜的效果/p
p onClick="alert(this.innerHTML)" span class="sample"
style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);"
Ttop.cn/spanspan class="sample"
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);"
Ttop.cn/span /p
h2Inner Shadow/h2
p这个是先用了一段白色的文字,再加了mask()滤镜,再用了shadow()滤镜,最后加入chroma()滤镜形成后一段字体,放在前一段文字的相对left:
-200px位置上形成的。/p
p onClick="alert(this.innerHTML)" span class="sample"
style="width: 200px; height: 70; color: white;"
Ttop.cn/spanspan class="sample"
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);"
Ttop.cn/span /p
h2Outline Text/h2
p用mask, glow and chroma三个滤镜联合作用/p
p onClick="alert(this.innerHTML)" span class="sample" style="width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);"Ttop.cn/span /p
h2与Marquee的完美结合/h2
p onClick="alert(this.innerHTML)" span class="sample"
style="width:320px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);"
marquee width:300 height:70 scrollamount="1" behavior="alternate" class="sample"www.Ttop.cn/marquee/span
span class="sample"
style="position: relative; left: -320; top: -15; width: 320; color: #2984ff;"
marquee width:320 height:70 scrollamount="1" behavior="alternate" class="sample"www.Ttop.cn/marquee/span /p
/div

展开更多 50%)
分享

猜你喜欢

Css不朽的经典神话 3D文字特殊效果推荐

Web开发
Css不朽的经典神话 3D文字特殊效果推荐

CSS产生的特殊效果

Html CSS布局 Div+CSS XHTML
CSS产生的特殊效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

3D打造辉光文字效果

电脑网络
3D打造辉光文字效果

PS制作3D文字效果

电脑网络
PS制作3D文字效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PowerPoint2018 3D文字效果

电脑网络
PowerPoint2018 3D文字效果

使用Fireworks制作3D效果文字

电脑网络
使用Fireworks制作3D效果文字

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

掌握CSS布局网页技巧的完全学习手册

掌握CSS布局网页技巧的完全学习手册

生成由SQL Server管理套件产生的T-SQL命令

生成由SQL Server管理套件产生的T-SQL命令
下拉加载更多内容 ↓