CSS3样式_实现字体发光效果

时间: 2018-03-21阅读: 4573标签: 字体

text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果。其实不然,这正是 text-shadow 属性的精妙之处。当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了。这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。当然,为了使外发光更加酷炫,还需要使用到 text-shadow 的另一个特性: 同时设置多个阴影(使用逗号分隔设置多个阴影)。


代码实例

html

<div>
    <p>xinpureZhu</p>
</div>

css

body {
    background: #000;
}
.container {
    width: 600px;
    margin: 100px auto 0;
}
p {
    font-family: 'Audiowide';
    text-align: center;
    color: #00a67c;
    font-size: 7em;
    -webkit-transition: all 1.5s ease;
            transition: all 1.5s ease;
}
p:hover {
    color: #fff;
    -webkit-animation: Glow 1.5s ease infinite alternate;
            animation: Glow 1.5s ease infinite alternate;

}
@-webkit-keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}
@keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}

效果示图




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/531

css中导入外部字体不生效的原因是什么?

css中可以使用@font-face引入外部字体,使用@font-face规则,网页设计师再也不必使用的web-safe的字体之一。有时使用@font-face规则引入外部字体不生效是什么原因?

javascript怎么禁止输入汉字?

JavaScript禁止中文输入可以通过设置输入框的css样式的ime-mode属性来实现。也可以通过控制输入字符来禁止输入中文。.

固定长度下随文字数量增加自动适配字体大小

在一个固定长度的位置(例如标题栏),针对其内容的字数不定的情况下,如何实现总是能展示完整的标题?定义获取字符串字节数的函数(注意是字节数不是长度)

CSS 字体样式

我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签,但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。

CSS字体样式属性

font-size:字体大小,说明用于设置字号,属性的值推荐使用像素单位px或者em;font-family:字体用于设置字体类型,网页中常用的字体有宋体、微软雅黑(microsoft yahei)、黑体等。

在Vue.js中加载字体的最佳做法

确保正确声明字体是加载字体的重要方面。这是通过使用 font-face 属性来声明你选择的字体来实现的。在你的Vue项目中,这个声明可以在你的根CSS文件中完成。在进入这个问题之前,我们先来看看Vue应用的结构。

vue项目引入外部字体

UI设计图有华文黑体,担心客户端没有该字体,将huawen.ttf字体文件,放入项目中:创建一个font.scss(或font.css)文件:在main.js中引入就可以直接使用了

Css @font-face 网页中嵌入特殊字体方法

要得到single Malta字体,不外乎两种途径,其一找到付费网站购买字体,其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的,那我们就得到免费的地方下载,在哪有呢?

如何设置css中字体大小?

如何设置css中字体大小?下面本篇文章就来给大家介绍一下使用CSS设置字体大小的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css怎么控制字间距?

文字与文字间距距离,字与字距离间距如何设置?使用CSS设置字与字间距的方法如下:我们使用css样式属性letter-spacing:+距离数字+html单位,如letter-spacing:15px;,即设置了字与字间距为15px

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!