CSS實現(xiàn)好看的聚光燈效果

發(fā)布時間：2024-02-27 16:19:25 作者：設(shè)計師工作日常

這篇文章主要為大家詳細介紹了CSS中如何使用 -webkit-background-clip 和 clip-path ，并配合 animation 屬性實現(xiàn)一個好看聚光燈效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

整體效果

使用 -webkit-background-clip 和 clip-path ，并配合 animation 屬性，實現(xiàn)一個好看聚光燈效果。

可適用于頁面加載或展示頁面大標(biāo)題內(nèi)容。

核心代碼部分，簡要說明了寫法思路；完整代碼在最后，可直接復(fù)制到本地運行。

核心代碼

html 代碼

<div?class="spotlight18"?data-cont="spotlight">spotlight</div>

主體部分一個 div 標(biāo)簽。

css 部分代碼

.spotlight18{
??color:?#eaeaea;
??font-size:?40px;
??font-weight:?900;
??text-transform:?uppercase;
??position:?relative;
}
.spotlight18:before{
??width:?inherit;
??height:?inherit;
??content:?attr(data-cont);
??clip-path:?ellipse(32px?32px?at?0?50%);
??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%);
??}
}

用 background-image 的 linear-gradient 拉出漸變背景，讓文字顏色透明 color: transparent ，然后配合 -webkit-background-clip: text 給文字實現(xiàn)漸變效果，最后加上動畫屬性 animation 并設(shè)置 clip-path 參數(shù)就可以啦。

注意：這里使用的是 -webkit-background-clip ，而不是 background-clip 。

完整代碼如下

html 頁面

<!DOCTYPE?html>
<html?lang="zh">
??<head>
????<meta?charset="utf-8">
????<link?rel="stylesheet"?href="style.css">
????<title>聚光燈效果</title>
??</head>
??<body>
????<div?class="app">
??????<div?class="spotlight18"?data-cont="spotlight">spotlight</div>
????</div>
??</body>
</html>

css 樣式

/**?style.css?**/
.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%);
??}
}