實作代碼
body{
background:#222;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
h1{
color:#333;
font-size:8rem;
}
h1:after{
content:"SPOTLIGHT";
color:transparent;
position:absolute;
left:0;
top:0;
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
background-clip:text;
-webkit-background-clip: text;
clip-path:circle(100px at 0% 50%);
-webkit:circle(100px at 0% 50%);
animation:light 5s infinite;
}
@keyframes light{
0%{
clip-path:circle(100px at 0% 50%);
-webkit:circle(100px at 0% 50%);
}
50%{
clip-path:circle(100px at 100% 50%);
-webkit:circle(100px at 100% 50%);
}
100%{
clip-path:circle(100px at 0% 50%);
-webkit:circle(100px at 0% 50%);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/906.html
標籤：Html/Css
上一篇：CSS實作按鈕霓虹效果
下一篇：輕輕松松學CSS:媒體查詢