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

新鲜出炉（css灯光效果）如何设置聚光灯效果，CSS实现聚光灯特效的方法，CSS实现聚光灯特效的方法，

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

免费领取腾讯云服务器！

分享一个利用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>复制

51啦网站统计，新人注册得五元红包！

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

分享到：

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

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

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

标签: 知识技能电脑

分享给朋友：

返回列表

上一篇：居然可以这样（css画爱心）爱心图形创意，CSS实现爱心形状动态加载条的方法，CSS实现爱心形状动态加载条的方法，

下一篇：越早知道越好（html打字机效果）css打字机效果逐行打印，CSS实现打字机效果的方法，CSS实现打字机效果的方法，

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

原创（禁止ping命令操作）linux如何停止ping，linux禁ping操作的方法，linux禁ping操作的方法，

免费领取腾讯云服务器！ linux中可以通过ssh命令来禁止其它机器来ping自己，下面是配置方法，大家可以参考一下。 linux中禁ping的方法方法1 临时禁ping，系统重启后失效，已在ubuntu系...

这都可以（PHP百度百科）pHp是什么，php中关于strtotime函数31日取前几个月日期的BUG，php中关于strtotime函数31日取前几个月日期的BUG，

免费领取腾讯云服务器！在使用php脚本中的 strtotime 函数取前几个月的日期时，发现每到31日时，取出的前几个月的日期都会出现错误。仔细检查了一下，发现在利用 strtotime 函数取前几个月的日期时，给 strtotime 函数的参数并不规范...

一看就会（imagefilter过滤图像方法）php imagefill，php imagefilter()图片滤镜函数的用法与示例，php imagefilter()图片滤镜函数的用法与示例，

一看就会（imagefilter过滤图像方法）php imagefill，php imagefilter()图片滤镜函数的用法与示例，php imagefilter()图片滤镜函数的用法与示例，

免费领取腾讯云服务器！有个小需求，需要使用php代码对图片进行颜色调整，比如变成灰色，改变图片的亮度，对比度等等。而php中就内置了一个图片的滤镜函数 imagefilter() ，下面就来具体说说这个函数的用法。 php imagefi...

速看（js将图片转换为二进制流）js将图片转换为webp，js将图片转换为base64编码方法，js将图片转换为base64编码方法，

免费领取腾讯云服务器！ js可以将图片文件转成base64编码的，便于图片文件的上传与处理，下面就写几种关于js脚本来转换图片为base64编码的方法。 js将图片转换为base64编码的方法方法1 将自身...

这都可以？（常用正则表达式大全）常用正则表达式大全图片，常用正则表达式大全，常用正则表达式大全，

免费领取腾讯云服务器！网上收集了一些常用的正则表达式，基本上都全，需要的可以拿去了。关于号码的正则表达式 QQ号正则表达式 BASIC /^[1-9][0-9]{...

硬核推荐（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)、快...

发表评论