HTML+CSS 很简单就实现聚光灯效果

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="ju.css">
</head>
<body>
	<h1 data-spotlight="lorelei47">lorelei47</h1>
</body>
</html>

CSS：

@charset "UTF-8";
html {
  font-size: 15px;
}

body {
  background-color: #222;
  display: flex;
  flex-flow: column;
  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;
  background-image: linear-gradient( 110.7deg,  rgba(255,81,47,1) 1.7%, rgba(255,167,47,1) 8.2%, rgba(218,253,1,1) 16.2%, rgba(98,234,20,1) 23.4%, rgba(69,193,42,1) 32.8%, rgba(7,249,149,1) 43.7%, rgba(6,200,217,1) 55.3%, rgba(18,51,233,1) 65.5%, rgba(122,59,202,1) 74.5%, rgba(231,7,249,1) 82.3%, rgba(202,59,163,1) 91.4% );
  background-size: 150%;
  background-position: center center;
  -webkit-background-clip: text;
  background-clip: text;
}
h1:nth-child(1)::after {
  animation: spotlight2 5s infinite;
}
h1:nth-child(2)::after {
  animation: spotlight3 2.5s infinite;
}
h1:nth-child(3)::after{
  animation: spotlight1 10s infinite;
}
@keyframes spotlight1 {
  0% {
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%);
  }
  
  25% {
    -webkit-clip-path: ellipse(1000px 100px at 100% 50%);
    clip-path: ellipse(1000px 100px at 100% 50%);
  }
  50% {
    -webkit-clip-path: ellipse(100px 100px at 100% 50%);
    clip-path: ellipse(100px 100px at 100% 50%);
  }
  75% {
    -webkit-clip-path: ellipse(1000px 100px at 0% 50%);
    clip-path: ellipse(1000px 100px at 0% 50%);
  }
  100% {
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%);
  }
}
@keyframes spotlight2 {
  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%);
  }
}
@keyframes spotlight3 {
  0% {
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%);
  }
  
  50% {
    -webkit-clip-path: ellipse(1000px 100px at 0% 50%);
    clip-path: ellipse(1000px 100px at 0% 50%);
  }
  
  100% {
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);
    clip-path: ellipse(100px 100px at 0% 50%);
  }
}

在这里插入图片描述

Java小胡

发布了13 篇原创文章 · 获赞 26 · 访问量 329

私信关注

HTML+CSS 很简单就实现聚光灯效果

猜你喜欢