下面是CSS3聚光灯效果实现代码

效果预览

Document

* {

margin: 0;

padding: 0;

}

body {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background-color: #222;

}

h1 {

color: #333;

font-size: 90px;

position: relative;

}

h1::after {

content: attr(data-spotlight);

/* content: 'Css 聚光灯效果'; */

color: transparent;

position: absolute;

top: 0;

left: 0;

clip-path: ellipse(100px 100px at 0% 50%);

background-image: url('https://images.unsplash.com/photo-1584840460878-3d65c4191bd6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');

background-size: 150%;

background-position: center center;

background-clip: text;

-webkit-background-clip: text;

animation: identifier 3s infinite;

}

@keyframes identifier {

0% {

clip-path: ellipse(100px 100px at 0% 50%);

}

50% {

clip-path: ellipse(100px 100px at 100% 50%);

}

100% {

clip-path: ellipse(100px 100px at 0% 50%);

}

Css 聚光灯效果

html聚光灯特效,CSS3聚光灯效果实现代码相关推荐

css制作流程卡片,css3卡片效果制作代码实例
Insert title here /* 顶部的盒子 */ .container{ width:1320px; margin:50px auto; } /* 翻转类样式 */ .flip{ width ...
html动态散花代码,IOS实现签到特效(散花效果)的实例代码
本文讲述了IOS实现签到特效(散花效果)实例代码.分享给大家供大家参考,具体如下: 散花特效 #import /// 领取奖励成功 @interface RewardSuccess : NSObjec ...
html聚光灯特效,jquery实现聚光灯效果的方法
本文实例讲述了jquery实现聚光灯效果的方法.分享给大家供大家参考.具体分析如下: 有时网站需要用jquery实现一种图片聚光灯特效,当鼠标滑过单组中的单个图标时,当前高亮,其它图标变暗的这种类似图 ...
CSS3 聚光灯特效
1.效果图 2.源码这里主要用到css3中的裁剪clip-path属性,以及动画animation属性 <!DOCTYPE html> <html><head>& ...
CSS3特效 - 呼吸灯效果
CSS3特效 - 呼吸灯效果 1. 效果图 2. 代码如下 <!DOCTYPE html> <html> <head><meta http-equiv=&qu ...
CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码...
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
【HTML粒子流特效】（效果 + 代码）
阅读目录效果展示代码效果展示代码以下即为全部源代码. 粒子特效.html <!DOCTYPE html> <html lang
css3 文字特效_惊人CSS3文字效果
css3 文字特效 Astonishing CSS3 text effects In today's tutorial, I will show you six amazing CSS3 text ...
css3星球围绕轨迹开场动画特效带流星效果
css3星球围绕轨迹开场动画特效带流星效果 .star 控制流星效果,角度速度可自定义 <!DOCTYPE html> <html class="two"> ...

html聚光灯特效,CSS3聚光灯效果实现代码

Css 聚光灯效果

html聚光灯特效,CSS3聚光灯效果实现代码相关推荐

最新文章

热门文章