CSS聚光灯特效

刺骨的言语ヽ痛彻心扉 2023-02-20 07:40 27阅读 0赞

<h1 data-spotlight="CodingStartup!">CodingStartup</h1>

html { 
      font-size: 15px;
    }
    
    body { 
      background-color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    
    h1 { 
      color: #333;
      font-family: Helvetica;
      margin: 0;
      padding: 0;
      font-size: 8rem;
      letter-spacing: -0.3rem;
      position: relative;
    }
    
    h1::after { 
      content: attr(data-spotlight);
      color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-clip-path: ellipse(100px 100px at 0% 50%);
      clip-path: ellipse(100px 100px at 0% 50%);
      animation: spotlight 5s infinite;
      background-image: url(https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
      background-size: 150%;
      background-position: center center;
      -webkit-background-clip: text;
      background-clip: text;
    }
    
    @keyframes spotlight { 
      0% { 
        -webkit-clip-path: ellipse(100px 100px at 0% 50%);
        clip-path: ellipse(100px 100px at 0% 50%);
      }
      
      50% { 
        -webkit-clip-path: ellipse(100px 100px at 100% 50%);
        clip-path: ellipse(100px 100px at 100% 50%);
      }
      
      100% { 
        -webkit-clip-path: ellipse(100px 100px at 0% 50%);
        clip-path: ellipse(100px 100px at 0% 50%);
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS mask-position 及简易版聚光灯特效

mask-position设置遮罩图像的初始位置, 这个位置是相对于遮罩位置层(由 mask-origin 确定)语法一个或多个 <position> 值, ...

柔光的暖阳◎/ 2024年05月24日 04:16/ 0 赞/ 46 阅读

相关 css特效开源库

在网上有很多开源的 CSS 特效库可以使用。这些库通常包含各种各样的样式和动画效果，可以让你快速地在你的网站上实现美观的效果。其中一些流行的 CSS 特效库包括：

àì夳堔傛蜴生んèń/ 2023年10月07日 23:12/ 0 赞/ 52 阅读

相关 CSS充电特效

CSS充电特效 html <!DOCTYPE html> <html lang="en"> <head> <meta cha

末蓝、/ 2023年05月28日 09:56/ 0 赞/ 21 阅读

相关 css特效弧形菜单

弧度菜单说明 demo地址：[https://github.com/liu-bluesky/-menu\_arc.git][https_github.com_liu-b

- 日理万妓/ 2023年05月22日 08:50/ 0 赞/ 27 阅读

相关 CSS常用特效

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 1、交错动画 ![format_png][] 有时候，我们需要给多个元素添加同一个动画，播放后，不难发

淩亂°似流年/ 2023年02月27日 12:22/ 0 赞/ 24 阅读

相关 CSS聚光灯特效

<h1 data-spotlight="CodingStartup!">CodingStartup</h1> html { font-size:

刺骨的言语ヽ痛彻心扉/ 2023年02月20日 07:40/ 0 赞/ 28 阅读

相关 134.HTML+CSS做一个聚光灯的效果送给心上人

效果 (源码网盘地址在最后) ![21377bc7ae6be11b6e9c2a37799bc53d.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来

亦凉/ 2022年10月27日 01:47/ 0 赞/ 124 阅读

相关 CSS 页面特效初步

CSS 文件主要由选择符、属性和属性值构成。选择符，又称为选择器，不同标记由不同选择器控制 CSS 选择器标记选择器(a)、类别选择器(.)、id选择器(\)

你的名字/ 2022年09月21日 13:17/ 0 赞/ 192 阅读

相关【CSS】常用特效字

<p class="shadow">人生之路应该如何走？</p> <p class="shadow2">人生之路应该如何走？</p> <p class=

拼搏现实的明天。/ 2022年09月11日 13:21/ 0 赞/ 183 阅读

相关纯css实现聚光灯效果

css还是蛮有意思的哦，效果啥的也不差，我给大家安利一个聚光灯效果，真的非常奈斯，效果如图：中间的圆圈是不断地移动的， ![20200505133652481.gi

柔情只为你懂/ 2021年07月26日 19:01/ 0 赞/ 545 阅读