如何使用css3制作特效发光字

html-css038

如何使用css3制作特效发光字,第1张

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>CSS3发光字</title> 

<style>

*{ padding:0margin:0font-size:14px }

body{ background: #f3f5f5 }

.d{ width:100%text-align:centermargin:20px auto }

.a , .n{ text-decoration: nonefont-size:6emfont-family:"微软雅黑" }

.a{ color:blue }

.a:link{ color:blue }

.n{ color:#FFFtext-shadow: 0 0 10px #000,0 0 25px #000 }

.def , .h:hover{ animation: run 2.4s infinite-webkit-animation: run 2.4s infinite-moz-animation: run 2.4s infinite

-ms-animation: run 2.4s infinite-o-animation: run 2.4s infinite }

@-webkit-keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

@-moz-keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

@-o-keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

@-ms-keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

@keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

</style>

</head>

<body>

<hr>

字体不带动效:

<div class="d">

<a href="javascript:void(0)" class="n">如何使用CSS3制作特效发光字</a>

</div>

<hr>

字体自带动效:

<div class="d">

<a href="javascript:void(0)" class="a def">不记得你的名字,但记得你的死期。</a>

</div>

<hr>

字体悬浮动效:

<div class="d">

<a href="javascript:void(0)" class="a h">剑之所至,心之所往。</a>

</div>

<hr>

</body>

</html>

一个使用伪元素来实现边框逐渐发光的代码,主要用到scale和opacity这两个属性。

Html代码

<div>

<img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>

<div>

<p>CSS3 逐渐发光的方格边框</p>

<p>CSS3 逐渐发光的方格边框</p>

</div>

</div>

Css代码

.light{

background: #fff

width: 180px

height: 180px

margin: 100px auto

position: relative

text-align: center

color: #333

transform:translate3d(0,0,0)

}

.light-inner{

padding: 60px 30px 0

pointer-events: none

position: absolute

left: 0

top: 0

bottom: 0

right: 0

text-align: center

transition: background 0.35s

backface-visibility: hidden

}

.light-inner:before, .light-inner:after{

display: block

content: ""

position: absolute

left: 30px

top: 30px

right: 30px

bottom: 30px

border: 1px solid #fff

opacity: 0

transition: opacity 0.35s, transform 0.35s

}

.light-inner:before{

border-left: 0

border-right: 0

transform:scaleX(0,1)

}

.light-inner:after{

border-top: 0

border-bottom: 0

transform: scaleY(1,0)

}

.light:hover .light-inner{

background: #458fd2

}

.light:hover .light-inner:before, .light:hover .light-inner:after{

opacity: 1

transform: scale3d(1,1,1)

}

.light-inner p{

transition: opacity .35s, transform 0.35s

transform: translate3d(0,20px,0)

color: #fff

opacity: 0

line-height: 30px

}

.light:hover .light-inner p{

transform: translate3d(0,0,0)

opacity: 1

}

text-shadow的属性:

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

text-shadow: 水平发光 垂直发光 模糊(发光)距离 发光颜色

举例:

p

{

text-shadow: 2px 3px 5px #FF0000

}

以上这个例子意思是:水平向右偏移2px,垂直向下偏移3px,模糊(发光)距离为5px,颜色为红色;

希望我的回答能够帮到您~