如何使用css3实现字体内发光效果

2024-01-17 13:51 小编
    使用css3实现字体发光效果原理
    首先我们要输入需要加入特效的文本。
    然后我们需要了解的是css3中本身没有发光特效的属性,但是我们可以通过text-shadow属性实现发光效果,那么我们现在着重介绍一下text-shadow属性。
    <1>text-shadow属性的基本语法:text-shadow:h-shadowv-shadowblurcolor;
    <2>h-shadow:水平阴影的位置(阴影水平偏移量),可为负值。v-shadow:垂直阴影的位置(阴影垂直偏移量),可为负值。
    <3>blur:阴影模糊的距离(默认为0)。
    <4>color:阴影颜色,一般默认为字体的颜色。
    <5>此外我们还可以使用text-shadow的另外一个特性:同时设置多个阴影(使用逗号分隔设置多个阴影)。这个特性暂时不做过多的介绍。
    使用css3实现字体发光效果实例
    <!doctypehtml>
    <html>
    <head>
    <metacharset="utf-8">
    <title>发光字体</title>
    <styletype="text/css">p{color:#0F9;font-size:36px;text-align:center;transition:all0.1s;
    text-shadow:1px1px1px#00FF00;}
    p:hover{text-shadow:6px6px6px#00FF00;}
    </style>
    </head>
    <body><palign="center">PHP中文网</p>
    </body>
    </html>

image.png

Tag: 如何 效果
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码