每日一贴: 跟我一起学习Html5+Css3(文字特效)下

宿海仁太 · 发表于 2014-8-30 22:02:09

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<style>
#block{
color: green;
text-shadow: 1px 1px 0px #212121;/*内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的*/
font-size:20px;
   -webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#block2{
color: #ccc;
      text-shadow: -1px -1px #fff, 1px 1px #333;/*浮雕*/
}
#block3{
color: transparent;  /*字体模糊*/
text-shadow: 0 0 4px #f36;
}
</style>
<div id="block">
宿海仁太
</div>
<div id="block2">
<h2>宿海仁太</h2>
</div>

<div id="block3">
<h1>宿海仁太</h1>
</div>
<div id="block4">
<h1>宿海仁太</h1>
</div>
<div id="block5">
<h1>宿海仁太</h1>
</div>
</body>

</html>

模糊效果是将前景色设置为透明，然后给其加上text-shadow，并只进行模糊度的设置
旋转文本主要使用的是transform中的rotate属性来改变文本的方向，从而达到一种旋转文本的效果，
采用上下不同色调，亮色为上，暗色为下，制作出浮雕效果：
知识点:
字体浮雕
字体模糊设置
字体旋转

ymgame01 · 发表于 2017-2-4 23:07:08

效果真的不错，加油哦。

ymgame01 · 发表于 2017-2-4 23:06:55

非常不错，一直在看

xuexiyiyuyan007 · 发表于 2015-8-20 13:25:28

找了很久了！终于找到了。

胆小的老虎 · 发表于 2014-8-31 13:40:07

宿海仁太发表于 2014-8-30 22:47
好久不见哦 ~~ 知道我是谁么

忘了你了不过我还是小老虎

宿海仁太 · 发表于 2014-8-30 22:47:54

胆小的老虎发表于 2014-8-30 22:18
路过滴

好久不见哦 ~~ 知道我是谁么

胆小的老虎 · 发表于 2014-8-30 22:18:02

路过滴

宿海仁太 · 发表于 2014-8-30 22:05:10

大表舅发表于 2014-8-30 22:03
支持枯叶

裤子穿好~

大表舅 · 发表于 2014-8-30 22:03:01

支持枯叶

		自动登录	找回密码
密码			注册

[JS例程分享] 每日一贴: 跟我一起学习Html5+Css3(文字特效)下

评分