实现原理

实现原理：2个相同的文字，后面的一层深灰色，前面彩色，套用圆形遮罩clip-path: ellipse(100px 100px at 0% 50%) 加上css animation实现

实现效果

实现效果：

源码

代码是在JS Bin中敲的

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><h1 data-spotlight="CodingStartUp">CodingStartUp</h1>
</body>
</html>

html {font-size: 15px;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #000;
}h1 {position: relative;color: #333;font-family: Helvetica;font-size: 8rem;letter-spacing: -0.3rem;margin: 0;padding: 0;
}h1::after {/* 这里content两种写法都行*//*content: 'CodingStartUp';*/content: attr(data-spotlight);position: absolute;top: 0;left: 0;color: transparent;/* 下面这句代码 生成一个直径100px正圆 位置在水平最左 垂直的中间 */clip-path: ellipse(100px 100px at 0% 50%);-webkit-clip-path:ellipse (100px 100px at 0% 50%);animation: spotlight 5s infinite;/* 图片在unsplash网站找的 */background-image: url('https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1562008928-b918308728ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1290&q=80');background-size: 150%;background-position: center center;background-clip: text;-webkit-background-clip: text;}@keyframes spotlight {0% {clip-path: ellipse(100px 100px at 0% 50%);-webkit-clip-path:ellipse (100px 100px at 0% 50%);}50% {clip-path: ellipse(100px 100px at 100% 50%);-webkit-clip-path:ellipse (100px 100px at 0% 50%);}100% {clip-path: ellipse(100px 100px at 0% 50%);-webkit-clip-path:ellipse (100px 100px at 0% 50%);}
}

CSS文字聚光灯效果相关推荐

HTML+CSS实现聚光灯效果
聚光灯效果 HTML CSS 关于兼容知识点 1.content 2.linear-gradient 3.background-clip 4.clip-path HTML <!DOCTYPE ...
html聚光灯特效,css实现聚光灯效果的代码分享
简介 CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命. 之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 兼容 ...
各种css文字样式效果——多个行内元素居中，三点，缩进，阴影等
前端基础知识--css样式学习一.文字效果 1. 文本垂直水平居中.(一行和多行) 2. 文本超出显示省略值... 3. 文本换行 4. 文本缩进 5. 文本两端对齐 6. 字体阴影效果一.文字效 ...
linear-gradient实现纯CSS文字淡入效果
利用CSS中的linear-gradient属性和帧动画,实现文字的淡入效果. css代码 linear-gradient属性 html代码文字淡入关键操作效果 css代码 linear-grad ...
CSS : 文字3D效果
CSS <style>.threeD{font-size:16px; /*设置字体大小*/font-weight:800; /*设置字体粗细*/text-shadow:1px 0px #0 ...
奇思妙想 CSS 文字动画
之前有写过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family[1] Web 字体 font-family 再探秘[2] 本文将会和这篇 -- CSS 奇思妙想边框动画[ ...
如何用css设置文字的聚光灯效果
要用 CSS 设置文字的聚光灯效果,你可以使用 text-shadow 属性. 例如: .highlighted {text-shadow: 0 0 5px #ffff00; } 在这个例子中,我们为 ...
php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变，关于HTML+CSS的实例效果很多， - phpStudy...
关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考. html+CSS实例效果(1):鼠标滑过改变文字鼠标经过变换文字 #Menu{ width:500px; margin:5 ...
（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...
一.文字环绕效果: html代码如下: 1 <body>2 3 <style type="text/css">4 #big img {float: left ...

CSS文字聚光灯效果

文章目录

实现原理

实现效果

源码

CSS文字聚光灯效果相关推荐

最新文章

热门文章