【前端】纯CSS实现探照灯效果

效果如下：

代码实现：

以下代码可以复制粘贴，在任何浏览器均可运行。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS实现探照灯效果</title></head><style>body,html {background-color: #3c3c3c;text-align: center;}.spotlight {position: relative;display: inline-block;font-size: 48px;}.spotlight::after {position: absolute;width: 100%;height: 100%;left: 0;top: 0;content: attr(title);color: #fff;animation: spotlight 3s ease-in-out infinite alternate;}@keyframes spotlight {0% {clip-path: ellipse(32px 32px at 0% 50%);}100% {clip-path: ellipse(32px 32px at 100% 50%);}}</style><body><h1 title="hello world" class="spotlight">hello world</h1></body>
</html>

【前端】纯CSS实现探照灯效果相关推荐

如何用纯 CSS 实现优惠券效果
背景本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html实现开关,使用纯css实现开关效果
首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则关闭开关选中,则打开开关开始画出off.on状态的草图 ...
纯CSS实现弹幕效果
纯CSS实现弹幕效果动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果--弹幕- 当你在阅读.看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
纯css实现信封效果
纯css实现信封效果 <body><div id="dialog"><div id="envelope"><div i ...
HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...

【前端】纯CSS实现探照灯效果

效果如下：

代码实现：

【前端】纯CSS实现探照灯效果相关推荐

最新文章

热门文章