CSS动画-文字聚光灯效果

Jackie_Mina

已于 2023-02-08 15:12:52 修改

阅读量249

点赞数 1

分类专栏： CSS 前端文章标签： css css3 前端

于 2023-02-07 12:24:55 首次发布

本文链接：https://blog.csdn.net/weixin_36752088/article/details/128916500

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

原视频：CodingStartup起码课

在这里插入图片描述

<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;
  animation:5s spotlight infinite;
  background-image:url(https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&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%);
  }
}