JugramAlucard.github.io/index.html at main · JugramAlucard/JugramAlucard.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spotlight18{
  color: #eaeaea;
  font-size: 40px;
  font-weight: 900;
  text-transform: uppercase;
  position: relative;
}
.spotlight18:before{
  width: inherit;
  height: inherit;
  content: attr(data-cont);
  color: transparent;
  background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #56e28d 100%);
  -webkit-background-clip: text;
  position: absolute;
  top: 0;
  left: 0;
  animation: spotlight18 8s linear infinite;
}
@keyframes spotlight18{
  0%{
    clip-path: ellipse(32px 32px at 0 50%);
  }
  50%{
    clip-path: ellipse(32px 32px at 100% 50%);
  }
  100%{
    clip-path: ellipse(32px 32px at 0 50%);
  }
}
    </style>
    <!-- <title>聚光灯效果</title> -->
  </head>
  <body>
    <div class="app">
      <div class="spotlight18" data-cont="spotlight">spotlight</div>
    </div>
  </body>
</html>