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

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

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

免费领取腾讯云服务器！

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

深度揭秘（Ubuntu 防火墙设置）ubuntu防火墙配置文件，ubuntu防火墙的安装与设置，ubuntu防火墙的安装与设置，

免费领取腾讯云服务器！ ubuntu系统中的防火墙使用的是iptables，而为了方便防火墙的设置ubuntu提供了一个防火墙管理工具ufw.下面这篇文章就说一说关于防火墙管理工具ufw的安装与使用方法。 ubuntu防火墙ufw的安装与设...

这都可以（判断是否是ajax请求）php判断请求方式，php判断是否为ajax请求的方法，php判断是否为ajax请求的方法，

免费领取腾讯云服务器！在后端可以利用php代码来判断前台提交的数据是否通过ajax进行提交的，其方法也非常的简单，只需要判断$_SERVER["HTTP_X_REQUESTED_WITH"] 是否存在，以及判断 $_SERVER["HTTP_X_REQU...

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

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

没想到（php获取IP地址）php获取当前时间的函数，php获取顶级域名/一级域名的方法，php获取顶级域名/一级域名的方法，

免费领取腾讯云服务器！列出几个网上收集的关于利用php脚本获取顶级域名的方法，可能分析的不是很完全，大家可以参考一下，适当的做一些调整。 php获取顶级域名的方法示例1： Jav...

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

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

燃爆了（jquery给元素添加点击事件）jquery怎么触发点击事件，jquery实现点击某元素外触发事件的方法，jquery实现点击某元素外触发事件的方法，

燃爆了（jquery给元素添加点击事件）jquery怎么触发点击事件，jquery实现点击某元素外触发事件的方法，jquery实现点击某元素外触发事件的方法，

免费领取腾讯云服务器！写了一个jq指定元素排除某个事件触发的效果，正好用上了上一篇博文中所说的 closest 方法，那么下面就来详细的说一下。 jq实现点击某元素外触发事件的方法排除某元素触发事件，无非是整个文档中，点...

发表评论