HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><h1>灯火辉煌</h1></body>
</html>

CSS

* {margin: 0;padding: 0;}body {background: #222;/* 设置为flex布局 */display: flex;/* 设置主轴（横轴） */justify-content: center;/* 设置侧轴（纵轴） */align-items: center;/* 设置body高度为100vh */min-height: 100vh;}h1 {color: #333;font-size: 8rem;/* 设置相对定位，使其成为父级参照物 */position: relative;}h1::after {/* 插入生成内容 */content: "灯火辉煌";/* 使文字为透明色彩 */color: transparent;/* 设置绝对定位，其父级为h1标签 */position: absolute;left: 0;top: 0;/* 添加背景颜色渐变颜色 */background: -webkit-linear-gradient(left, #c23616, #192a56, #00d2d3, yellow, #6D214F, #2e86de, #4cd137, #e84118);/* 超出文字裁剪,正常写法 */background-clip: text;/* -webkit考虑到谷歌浏览器的兼容问题，所以使用-webkit */-webkit-background-clip: text;/* 剪切出一个圆 半径为100px at设置的是坐标轴为0%和50% */clip-path: circle(100px at 0% 50%);/* 兼容谷歌浏览器 */-webkit-clip-path: circle(100px at 0% 50%);/* 调用动画效果 */animation: light 5s infinite;}@keyframes light {0% {/* 剪切出一个圆形区域  大小 at X轴占比 Y轴占比*/clip-path: circle(100px at 0% 50%);/* 兼容写法 */-webkit-clip-path: circle(100px at 0% 50%);}50% {clip-path: circle(100px at 100% 50%);-webkit-clip-path: circle(100px at 100% 50%);}100% {clip-path: circle(100px at 0% 50%);-webkit-clip-path: circle(100px at 0% 50%);}}

关于兼容

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera私有属性
这些是为了兼容老版本的源写法，比较新版本的浏览器都支持直接写：border-radius。

知识点

1、content

【定义和说明】
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
【说明】
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

2、linear-gradient

【定义和说明】
创建一个线性渐变的 "图像"
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角     度）的渐变效果。
【用法】
background: linear-gradient(direction,color-stop);

3、background-clip

指定背景绘制区域
background-clip正常的值有：
border-box  背景被裁剪到边框盒（剪切成边框方框）。
padding-box 背景被裁剪到内边距框（剪切成衬距方框）。
content-box 背景被裁剪到内容框（剪切成内容方框）。
这里用到的是text
这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的    背景即 为区块的背景，文字之外的区域都将被裁剪掉。

4、clip-path

创建一个裁剪区域，该区域设置应显示元素的哪一部分。区域内的部分显示，区域外的隐藏。
详情链接：[CSS层叠样式表](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)

HTML+CSS实现聚光灯效果相关推荐

html聚光灯特效,css实现聚光灯效果的代码分享
简介 CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命. 之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 兼容 ...
CSS文字聚光灯效果
文章目录实现原理实现效果源码实现原理实现原理:2个相同的文字,后面的一层深灰色,前面彩色,套用圆形遮罩clip-path: ellipse(100px 100px at 0% 50%) 加上 ...
如何用css和HTML设置聚光灯效果
可以使用 CSS 和 HTML 创建聚光灯效果.具体来说,你需要创建一个包含所有内容的容器,并使用 CSS 的 box-shadow 属性在容器周围添加阴影.然后,使用 HTML 的 div 元素在容 ...
如何用css设置文字的聚光灯效果
要用 CSS 设置文字的聚光灯效果,你可以使用 text-shadow 属性. 例如: .highlighted {text-shadow: 0 0 5px #ffff00; } 在这个例子中,我们为 ...
聚光灯效果（css+html）
最终效果: 实现code: <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
WPF实现聚光灯效果
WPF开发者QQ群: 340500857 | 微信群 -> 进入公众号主页加入组织欢迎转发.分享.点赞.在看,谢谢~. 前言效果仿照 CSS聚光灯效果 https://www.jians ...
html聚光灯特效,jquery实现聚光灯效果的方法
本文实例讲述了jquery实现聚光灯效果的方法.分享给大家供大家参考.具体分析如下: 有时网站需要用jquery实现一种图片聚光灯特效,当鼠标滑过单组中的单个图标时,当前高亮,其它图标变暗的这种类似图 ...
手把手教你实现聚光灯效果
聚光灯是一种特殊的点光源,它能够朝着一个方向投射光线.聚光灯投射出的是类似圆锥形的光线,这与我们现实中看到的聚光灯是一致的.其灯光从一点发出,沿着某一个方向照射出一个锥形光照范围.聚光灯近似于一个有夹 ...
html聚光灯特效,CSS3聚光灯效果实现代码
下面是CSS3聚光灯效果实现代码效果预览 Document * { margin: 0; padding: 0; } body { height: 100vh; display: flex; jus ...

HTML+CSS实现聚光灯效果

聚光灯效果

HTML

CSS

关于兼容

知识点

1、content

2、linear-gradient

3、background-clip

4、clip-path

HTML+CSS实现聚光灯效果相关推荐

最新文章

热门文章