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

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

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

免费领取腾讯云服务器！

分享一个利用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实现聚光灯特效的方法，” 的相关文章

不看后悔（php全局变量有哪些）php全局变量和局部变量的区别，php全局变量与js全局变量的区别，php全局变量与js全局变量的区别，

免费领取腾讯云服务器！因为经常写php与js代码，有时候使用全局变量的时候经常的混淆，这篇文章就来说说js中的全局变量与php中的全局变量的区别。 js全局变量与php全局变量的区别 php全局变量 php...

干货分享（php输出json中文乱码）json数据中文乱码怎么办，解决 php json中文乱码的问题，解决 php json中文乱码的问题，

免费领取腾讯云服务器！ php输出使用json_encode函数生成的json数据的时候，发现数据中的中文被转义成了unicode编码，如果使用ajax请求的json数据还好一点，浏览器会自动将unicode编码转义回来，但如果直接输出到浏览器上，那就会直...

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

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

不要告诉别人（php求数组交集）php数组取差集，php计算两个数组的交集与差集，php计算两个数组的交集与差集，

免费领取腾讯云服务器！ php中计算两个数组之间的交集与差集可以使用 array_intersect() 与 array_diff() 数组处理函数，这两个数组的具体使用方法如下。 php计算两个数组之间的交集 array_...

燃爆了（php中md5函数）如何获取文件的md5值，php获取文件md5值的方法，php获取文件md5值的方法，

免费领取腾讯云服务器！ php可以通过 md5_file() 函数获取指定文件的 MD5 散列，常常用于文件的安全方面，用于判断一个文件是否被修改过，下面就由飞鸟慕鱼博客来说一说它的用法。 PHP md5_file() 函数...

学会了吗（js中常用的正则表达式）js中使用正则表达式，js中常用的正则表达式，js中常用的正则表达式，

免费领取腾讯云服务器！列出几个在js脚本中常常用到的正则表达式，存放下来以后备用。 JS 检测用户名正则表达式 (1)、用户名正则，4到16位（字母，数字，下划线，减号） Java...

发表评论