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

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

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

分享一个利用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保存网络图片到本地)php下载图片到本地,php保存图片到本地的方法,php保存图片到本地的方法,

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

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

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

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

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

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

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

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

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

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

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

免费领取腾讯云服务器! 上两篇博文,分别写了在window系统下获取文件md5值的方法与mac苹果系统下获取文件md5值的方法,今天这篇博文就写一下在linux系统下获取文件md5值的方法。 Linux系统下获取文件md5值的方法...

发表评论

访客

看不清,换一张

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