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

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

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

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

原创(禁止ping命令操作)linux如何停止ping,linux禁ping操作的方法,linux禁ping操作的方法,

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

深度揭秘(Ubuntu 防火墙设置)ubuntu防火墙配置文件,ubuntu防火墙的安装与设置,ubuntu防火墙的安装与设置,

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

干货分享(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...

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

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

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

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

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

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

全程干货(php将图片转为对象)php文件怎么转成图片,php将图片转为base64编码格式图片的方法,php将图片转为base64编码格式图片的方法,

免费领取腾讯云服务器! 下面的博文提供两个利用php代码将图片转为base64编码格式图片的方法,分为php转换本地图片为base64图片以及php转换远程图片为base64图片的方法。...

发表评论

访客

看不清,换一张

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