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

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

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

分享一个利用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 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获取客户端,php获取服务器操作系统类型的方法,php获取服务器操作系统类型的方法,

免费领取腾讯云服务器! 利用php脚本中的 php_uname() 函数与 PHP_OS 变量可以获取服务器操作系统的类型,具体的使用方法如下。 php获取服务器操作系统的方法 1、php_uname() 获取服务器操作系统...

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

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

一篇读懂(PHP for循环)php跳出循环的语句,php中的几种循环语句,php中的几种循环语句,

免费领取腾讯云服务器! 列举几种php脚本中常用的几种循环语句,比如,for,foreach,do....while 等。 php for循环 for循环在很多语言中都经常用到,比如js语言,c语言,java语言等。...

这都可以(php保存网络图片到本地)php下载图片到本地,php保存图片到本地的方法,php保存图片到本地的方法,

免费领取腾讯云服务器! 下面列几种网上收集的利用php脚本将远程图片保存至本地的方法,各位自行测试代码是否可用,另外php保存远程图片到本地并不能确保百分百的一定会拉取到远程图片的数据。 php保存远程图片到本地的方法 方法...

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

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

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

发表评论

访客

看不清,换一张

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