css字体发光样式_php语言入门

css字体发光样式_php语言入门本文给大家介绍CSS3如何实现字体发光效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。text-shadow该属性为文本添加阴影效果text-shadow:h-shadowv-shadowblurcolor;h-shadow:水平阴影的位置(阴影水平偏移量),可为负值,必需v-shadow:垂直阴影的位置(阴影垂直偏移量),可为负值,必需blur:阴…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

本文给大家介绍CSS3如何实现字体发光效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

text-shadow

该属性为文本添加阴影效果text-shadow: h-shadow v-shadow blur color;

h-shadow: 水平阴影的位置(阴影水平偏移量),可为负值,必需

v-shadow: 垂直阴影的位置(阴影垂直偏移量),可为负值,必需

blur: 阴影模糊的距离(默认为0),可选

color: 阴影颜色(默认为当前字体颜色),可选

乍一看,text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果。

其实不然,这正是 text-shadow 属性的精妙之处。

当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了

这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。

当然,为了使外发光更加酷炫,还需要使用到 text-shadow 的另一个特性: 同时设置多个阴影(使用逗号分隔设置多个阴影)

代码实例

HTML Code

xinpureZhu

CSS Codebody {

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;

}

}

效果示图

c6e0beaf47f5398e95c612c5744f45fc.gif

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问CSS3视频教程!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/180841.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • fsd开机启动_怎么取消开机自动启动软件

    fsd开机启动_怎么取消开机自动启动软件一、vi/etc/rc.d/rc.local添加:/usr/local/nginx/sbin/nginx/usr/bin/fdfs_trackerd/etc/fdfs/tracker.confrestart/usr/bin/fdfs_storaged/etc/fdfs/storage.confrestart二、给rc.local赋可执行权限chmo…

    2022年10月19日
    0
  • 如何查看vue版本和vue/cli的版本

    如何查看vue版本和vue/cli的版本经常有人以为vue-V是查看vue的版本,但其实不是,一开始自己迷迷糊糊也以为是,后来查文档之后才知道正确答案,特此在这里总结一下,那么这条博客就当是开启学习vue3之路的第一条笔记叭~如果查看vue版本和vue/cli脚手架的版本,这里共有两种方式:一、命令行vue版本npmlistvuevue/cli版本vue-V部分截图:二、package.json文件查看package.json文件相关依赖版本号:…

    2022年5月16日
    203
  • 如何删除U盘system volume information_u盘单独文件夹加密

    如何删除U盘system volume information_u盘单独文件夹加密U盘中毒,U盘内的文件夹名称变成.exe后缀,且多出一个名为SystemVolumeInformation的文件夹,对U盘进行格式化无效后,可以尝试本篇博客介绍的方法删除文件夹。

    2022年9月18日
    0
  • Linux推荐网站

    Linux推荐网站

    2021年4月29日
    106
  • GridView中DropDownList的事件

    GridView中DropDownList的事件 GridView中DropDownList的事件   1.获取事件所在GridView的行索引:   可以通过一下代码获得:  protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)    {        DropDownList drp = sender as DropDow

    2022年9月12日
    0
  • pandas at loc_pandas str

    pandas at loc_pandas strpandas中.loc和.iloc以及.at和.iat的区别显示索引和隐式索引显示索引和隐式索引importpandasaspddf=pd.DataFrame({‘姓名’:[‘张三’,‘李四’,‘王五’],‘成绩’:[85,59,76]})#传入冒号‘:’,表示所有行或者列#显示索引:loc,第一个参数为index切片,第二个为columnsdf.loc[2] #index为…

    2022年8月30日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号