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

今天，我给大家介绍一下利用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设置了两个阴影。除了这种凸显的效果之外，text-shadow还可以给文字实现倒影的效果，这里我就不做演示了，大家可以自己动手尝试一下。
静态的有了，那么下面我给大家介绍一下动态的效果。先看一下效果。

文字就像手机的呼吸灯一样，这里利用的css3的animation。下面，我给出关键的css代码：

span{
  color:#CD5555;
  transition: all 0.5s;
}
p span:hover{
  color:white; 
  -webkit-animation: animation1 1.5s ease-in-out infinite alternate;
  -moz-animation: animation1 1.5s ease-in-out infinite alternate;
  animation: animation1 1.5s ease-in-out infinite alternate; 
}
@keyframes animation1 {
  from {
    text-shadow:0 0 10px #FF6A6A,
                0 0 20px #FF6A6A,
                0 0 30px #FF6A6A,
                0 0 50px #EE6363,
                0 0 70px #EE6363,
                0 0 90px #EE6363,
                0 0 130px #EE6363,
                0 0 150px #EE6363,
                0 0 180px #EE6363;
  }
  to {
    text-shadow:0 0 5px #FF6A6A,
                0 0 10px #FF6A6A,
                0 0 15px #FF6A6A,
                0 0 20px #EE6363,
                0 0 35px #EE6363,
                0 0 40px #EE6363,
                0 0 55px #EE6363,
                0 0 65px #EE6363,
                0 0 70px #EE6363;
  }
}

这里运用了CSS3的动画效果animation和过渡transition，我这里简单的给大家说明一下

transition: all 0.5s; all是指过渡的属性，这里大家也可以设置成具体的属性；0.5是过渡时间

animation: animation1 1.5s ease-in-outinfinite alternate;

animation1是指，自己设置的animation名字，也就是动画执行的内容

@keyframes animation1{

         from{  //属性开始的状态

}

to{  //属性结束的状态

}

}

1.5s：完成动画的时间为1.5s；

ease-in-out：元素从初始状态到终止状态，先加速再减速；

infinite：动画播放的次数，无限次；

alternate：动画播放方向，在正向播放后，也会反方向播放

知道原理后，大家可以大胆的常识，可能会看到你意想不到的效果。

有了好看的动画效果，那么配上好看的字体是不是很棒。下面，我再给大家介绍一下关于CSS中@font-face的运用。

@font-face{

font-family:'自定义字体的名称';

src:url('自定义字体的存放路径')   format('自定义字体的格式');

font-weight:是否为粗体;

font-style:字体样式;

}

由于浏览器的不同，为了能够达到效果，我们还需要设置不同的字体格式

@font-face {

 font-family: 'fontname';

 src: url(' fontname.eot'); /* IE9 Compat Modes */

 src: url(' fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8*/

        url(' fontname.woff') format('woff'), /* 所有现代浏览器 */

        url(' fontname.ttf') format('truetype'), /* Safari, Android, iOS */

        url(' fontname.svg#svgFontName') format('svg'); /* Legacy iOS */

}

除了@font-face之外，我们还需要一样最重要的东西，就是特殊字体

获得特殊字体，我们需要到一些网站上去下载。博主使用的是Dafont.com，大家可以进入网站中选择自己喜欢的字体样式，然后下载。

下载解压后，打开文件

接下来，我们需要利用第三方软甲或者网站帮助我们去获得@font-face所需的字体格式

博主利用的是fontsquirrel，进入该网站后，我们会看到如下的界面

大家记住红色字体之前一定要打钩哦，然后点击右下角的下载

文件下载解压后，将文件中的.ttf,.otf,.woff,.eot,.svg（这些文件不一定都有）的文件拷贝到你的网页文件中

接下来，就是实现效果的时候了

博主将自己的代码和演示效果贴出来：

@font-face{
	font-family: 'stardustDemo';
	src:url('fonts/stardust_adventure-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
h3{
	text-align: center;
	font-family:'stardustDemo';
	font-size: 96px;
}
span{
	color:#CD5555;
	 transition: all 0.5s;
}
h3 span:hover{
	color:white; 
	-webkit-animation: animation1 1.5s ease-in-out infinite alternate;
	-moz-animation: animation1 1.5s ease-in-out infinite alternate;
	animation: animation1 1.5s ease-in-out infinite alternate; 
}
@keyframes animation1 {
     from {
	 text-shadow:0 0 10px #FF6A6A,
	             0 0 20px #FF6A6A,
		     0 0 30px #FF6A6A,
		     0 0 50px #EE6363,
		     0 0 70px #EE6363,
		     0 0 90px #EE6363,
		     0 0 130px #EE6363,
		     0 0 150px #EE6363,
		     0 0 180px #EE6363;
     }
     to {
	text-shadow:0 0 5px #FF6A6A,
		     0 0 10px #FF6A6A,
		     0 0 15px #FF6A6A,
		     0 0 20px #EE6363,
		     0 0 35px #EE6363,
		     0 0 40px #EE6363,
		     0 0 55px #EE6363,
		     0 0 65px #EE6363,
		     0 0 70px #EE6363;
     }
}

提醒大家一下，font-family中的字体名称是自己定义的，并不是默认的字体样式。

以上就是我给大家带来的网页中文字效果的内容，第一次更博还有不懂得的地方，希望大家能够指正，博主争取以后给大家带来更好的分享内容。