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

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

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

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

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

免费领取腾讯云服务器! 安装了一个ubuntu系统,想着在内网中用ssh进行远程连接管理。下面这篇博文就说说如果在ubuntu系统中安装ssh远程管理服务。 ubuntu 安装ssh服务器的方法 1、安装 openssh-s...

全程干货(查看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官方提供...

不要告诉别人(php求数组交集)php数组取差集,php计算两个数组的交集与差集,php计算两个数组的交集与差集,

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

没想到(imagettftext函数)imagettftext函数支持的编码类型,imagettftext(): any2eucjp(): invalid code in input string 错误解决方法,imagettftext(): any2eucjp(): invalid code in input string 错误解决方法,

免费领取腾讯云服务器! 最近在研究关于php生成图片的东西,发现了 imagettftext() 函数中一个不是错误的错误,具体的错误情况如下所示。 错误代码:...

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

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

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

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

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

发表评论

访客

看不清,换一张

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