【知了堂学习笔记】CSS3令人眼前一亮的网页文字效果

最新推荐文章于 2025-06-04 13:33:27 发布

T_Texture

最新推荐文章于 2025-06-04 13:33:27 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3 动画 font-face

本文链接：https://blog.youkuaiyun.com/T_Texture/article/details/77751881

今天，我给大家介绍一下利用text-shadow，css3动画实现的文字效果

首先，我们需要去了解一下text-shadow的相关属性

text-shadow:h-shadow v-shadow blur color;

h-shadow:水平阴影的位置,可为负值;

v-shadow:垂直阴影的位置,可为负值;

blur:模糊的距离;

color:阴影的颜色.

其中blur以及color为可选参数，且text-shadow可以向文本添加一个或多个阴影，之间用逗号隔开。大家想要了解更多的信息可到w3school里面了解更多。

案例一

这里利用text-shadow，可以达到文字突出的效果

下面是CSS代码
body{
  background-color: rgba(0,0,0,0.1);
}
p{
  text-align:center;
  font-size:96px;
  margin:50px auto; 
}
span{
  color: rgba(255,255,255,0.8);
  text-shadow:0 -1px 1px rgba(0,0,0,0.1),
                    0 -3px 1px rgba(0,0,0,0.3);
}
这里为了效果明显，我给text-shadow设置了两个阴影。除