background
-
color
:
#00c1de
;
opacity
:
0.3
;
-
moz
-
box
-
shadow
:
0px 0px 20px #00c1de
;
-
webkit
-
box
-
shadow
:
0px 0px 20px #00c1de
;
box
-
shadow
:
0px 0px 20px #00c1de
;
border
-
radius
:
10px
;
.
star
-
breath
{
opacity
:
0.1
;
animation
:
breath 3s ease
-
in
-
out infinite
;
-
webkit
-
animation
:
breath 3s ease
-
in
-
out infinite
;
@keyframes breath
{
from
{
opacity
:
0.3
;
}
50
%
{
opacity
:
1
;
}
to
{
opacity
:
0.3
;
}
@
-
webkit
-
keyframes breath
{
from
{
opacity
:
0.3
;
}
50
%
{
opacity
:
1
;
}
to
{
opacity
:
0.3
;
}
<
/
style
>
<
/
head
>
<
div
class
=
"light-background"
>
<
div
class
=
"breath-light star-breath"
>
<
/
div
>
<
/
div
>
<
/
body
>
<
/
html
>
<head>
.arrow_box{animation: glow 800ms ease-out infinite alternate; }
@keyframes glow {
border-color: #393;
box-shadow: 0 0 5px rgba(0,25...
text-shadow 属性应用于阴影文本，属于
CSS3
的属性，默认值为 none。
text-shadow 属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
语法：text-shadow: h-shadow v-shadow blur color;
一个使用伪元素来
实现
边框
逐渐发光的代码，主要用到scale和opacity这两个属性。
HTML代码：<div class="light">
<img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/>
<div class=...
可以使用
CSS3
的
动画
属性和伪元素来
实现
边框
跑马灯特效。
首先，需要给元素设置一个固定的宽度和高度，并设置
边框
样式
。然后，使用伪元素::before和::after来创建两个半透明的遮罩层，覆盖在元素的
边框
上方。
接下来，使用
CSS3
的
动画
属性来使伪元素移动。将伪元素的宽度设置为0，然后使用@keyframes关键字定义
动画
，让伪元素从左侧或右侧移动到另一侧，并将宽度逐渐增加到与元素相同的宽度。
最后，使用animation属性将
动画
应用到伪元素上，并设置
动画
的持续时间、延迟时间和循环次数。
下面是一个示例代码：
HTML代码：
```html
<div class="marquee">
<p>这是一个
边框
跑马灯特效</p>
CSS
代码：
```
css
.marquee {
width: 500px;
height: 100px;
padding: 20px;
border: 2px solid #000;
position: relative;
.marquee::before, .marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0;
background-color: rgba(255, 255, 255, 0.5);
.marquee::before {
left: 0;
animation: marquee-left 5s ease-in-out infinite;
.marquee::after {
right: 0;
animation: marquee-right 5s ease-in-out infinite;
@keyframes marquee-left {
width: 0;
transform: translateX(0);
50% {
width: 100%;
transform: translateX(0);
100% {
width: 0;
transform: translateX(100%);
@keyframes marquee-right {
width: 0;
transform: translateX(0);
50% {
width: 100%;
transform: translateX(0);
100% {
width: 0;
transform: translateX(-100%);
在这个示例中，我们创建了一个宽度为500px、高度为100px的div元素，并设置了2px的黑色
边框
。然后，在div元素上使用了伪元素::before和::after，并设置它们的宽度为0，背景色为半透明白色。
接着，使用@keyframes关键字分别定义了两个
动画
marquee-left和marquee-right，让伪元素从左侧或右侧移动到另一侧，并将宽度逐渐增加到与元素相同的宽度。最后，将
动画
应用到伪元素上，并设置了
动画
的持续时间、延迟时间和循环次数。
这样，一个简单的
边框
跑马灯特效就完成了。
