css3外发光效果怎么做

html-css011

css3外发光效果怎么做,第1张

<div style="box-shadow: 4px 4px 10px #f00 border:1px solid green"></div>

box-shadow: X轴 Y轴 发光度 颜色；

text-shadow的属性：

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

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

举例：

p

{

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

}

以上这个例子意思是：水平向右偏移2px，垂直向下偏移3px，模糊（发光）距离为5px，颜色为红色；

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

一个使用伪元素来实现边框逐渐发光的代码，主要用到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

}