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

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

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

免费领取腾讯云服务器！

分享一个利用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 file_get_contents curl）php file_get_contents post，php file_get_contents(): SSL operation failed with code 1. OpenSSL Error message.....，php file_get_contents(): SSL operation failed with code 1. OpenSSL Error message.....，

免费领取腾讯云服务器！在调试php脚本代码时，发现使用 file_get_contents() 函数请求HTTPS的网址链接时出现了报错，其报错代码如下面所示“file_get_contents(): SSL operation failed with...

全程干货（查看php是否启动）查看php是否支持rar解压，查看php是ts版本还是nts版本的方法，查看php是ts版本还是nts版本的方法，

全程干货（查看php是否启动）查看php是否支持rar解压，查看php是ts版本还是nts版本的方法，查看php是ts版本还是nts版本的方法，

免费领取腾讯云服务器！今天有用户来询问php的ts版本与php的nts版本的区别是什么，怎么去查看自己安装的php服务是ts版本还是nts版本，下面博文就来详细的说一下。 php ts版本与nts版本的区别 php官方提供...

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

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

难以置信（php错误日志在哪里）PHP 日志，php设置错误日志的方法，php设置错误日志的方法，

难以置信（php错误日志在哪里）PHP 日志，php设置错误日志的方法，php设置错误日志的方法，

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

学会了吗（php保存文件到指定地点）php保存图片，php保存base64编码图片的方法，php保存base64编码图片的方法，

免费领取腾讯云服务器！写一个图片上传的插件，因为特殊性就在前台将图片转为base64编码并上传到后台，下面说一说在后台怎么利用php代码将base64编码格式的图片转成正常的图片，并保存的。 PHP保存Base64图片 p...

这都可以？（jquery去掉前后空格）jquery去掉字符串前后空格，jQuery去掉 serialize() 方法中指定的name值，jQuery去掉 serialize() 方法中指定的name值，

免费领取腾讯云服务器！在修改一个前台表单提交逻辑时，为了不动以前的代码(代码和屎一样)，就想着在提交数据时过滤掉form表单中指定的name属性和值，由于表单直接使用jquery中的serialize()方法来获取的form表单的数据，所以就要对 ser...

发表评论