当前位置:首页 > 电脑知识 > 正文内容

新鲜出炉(css灯光效果)如何设置聚光灯效果,CSS实现聚光灯特效的方法,CSS实现聚光灯特效的方法,

sauo3年前 (2022-09-17)电脑知识87

分享一个利用CSS样式代码实现文字聚光灯特效的方法,其实现的逻辑方法与代码非常的简单,主要用到了CSS中的 animation 动画渐变背景等。

CSS聚光灯效果

1、效果图片

2、实现代码

Markup
<style> html,body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #222; } h1{ font-size: 4rem; color: #333; width: 37.5rem; position: relative; } /* 使用伪元素加个遮罩层 */ h1::after{ content:attr(data-text); position: absolute; top: 0; left: 0; color: transparent; background-image: linear-gradient(to left,#1a2a6c,#b21f1f,#fdbb2d); background-clip: text; -webkit-background-clip: text; clip-path: ellipse(6.25rem 6.25rem at 0% 50%); animation: move 5s infinite; } @keyframes move{ 0%, 100%{ clip-path: ellipse(6.25rem 6.25rem at 0% 50%); } 50%{ clip-path: ellipse(6.25rem 6.25rem at 100% 50%); } } </style> <h1 data-text="飞鸟慕鱼博客站"> 飞鸟慕鱼博客站 </h1>复制

本文链接:http://blog.sauo.top/?id=302 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=302

分享给朋友:

“新鲜出炉(css灯光效果)如何设置聚光灯效果,CSS实现聚光灯特效的方法,CSS实现聚光灯特效的方法,” 的相关文章

难以置信(php错误日志在哪里)PHP 日志,php设置错误日志的方法,php设置错误日志的方法,

难以置信(php错误日志在哪里)PHP 日志,php设置错误日志的方法,php设置错误日志的方法,

免费领取腾讯云服务器! php设置错误日志需要在php配置文件php.ini中设置,只需要简单的几步设置就可以实现,下面就来详细的说一下。 php设置错误日志的方法 1、打开php的配置文件,php.ini...

这都可以(mac打开md文件)如何查看文件的md5,mac系统下查看文件md5的方法,mac系统下查看文件md5的方法,

这都可以(mac打开md文件)如何查看文件的md5,mac系统下查看文件md5的方法,mac系统下查看文件md5的方法,

免费领取腾讯云服务器! 上一篇博文飞鸟慕鱼博客讲了一下,关于在window系统中利用cmd命令查看文件md5的方法,下面这篇博文飞鸟慕鱼就来说说在mac苹果系统中,如果利用终端命令来查看文件md5的值 mac 查看文件md5的方法...

硬核推荐(windows查看文件的md5值)windows 查看md5值,window 系统查看文件md5值的方法,window 系统查看文件md5值的方法,

硬核推荐(windows查看文件的md5值)windows 查看md5值,window 系统查看文件md5值的方法,window 系统查看文件md5值的方法,

免费领取腾讯云服务器! 在winodw系统上查看一个文件的md5值,不用去安装专门查看文件md5的软件,只需要使用 cmd 命令即可。 window 查看 md5 值的方法 1、打开CMD命令窗口 (1)、快...

墙裂推荐(js判断ip是否合法)判断ipv4地址是否合法,js代码判断IP地址的合法性(只支持IPV4),js代码判断IP地址的合法性(只支持IPV4),

免费领取腾讯云服务器! 客户定制了一个IPV4格式的IP地址在线查询的工具,需要用户在前台输入IPV4格的IP地址,为了防止用户输入的IPV4格式的IP错误,又减少后端的服务器资源的浪费,就想到了先在前台用JS脚本判断一下,用户输入的IPV4地址是否合法。...

这都可以(php获取当前时间)php获取月份,php获取上个月,上上个月的开始时间与结束时间的方法,php获取上个月,上上个月的开始时间与结束时间的方法,

免费领取腾讯云服务器! 记录一下利用php脚本获取上个月,上上个月的开始时间与结束时间的方法,下面的示例代码,有需要的可以参考一下。 php 获取上个月,上上个月的开始时...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。