1. 首頁 > 生活百科 > >

附代碼 如何利用CSS制作一個聚光燈效果

小知識it知識

如何利用CSS制作一個聚光燈效果？下面本篇文章給大家分析一下實現原理 ， 分享一下CSS聚光燈效果的實現代碼 ， 希望對大家有所幫助！

附代碼 如何利用CSS制作一個聚光燈效果

文章插圖

CSS聚光燈效果的實現原理很簡單：
    將兩個文字完全重疊 ， 內層是深灰色 ， 外層是有漸變顏色的 。 【推薦學習：css視頻教程】在將外層的文字套用圓形遮罩 。 最后加上 CSS Animation 。
技術支持引用到的CSS屬性有：
    linear-gradient()background-imagebackground-clipclip-path
實現為了將HTML結構保持簡潔 ， 之后會使用 偽類元素 去制作 。
HTML代碼如下：
<h1 data-text="我想藏在罐頭里!!!">我想藏在罐頭里</h1>
注意: attr() 理論上能用于所有的CSS屬性但目前支持的僅有偽元素的 content 屬性 ， 其他的屬性和高級特性目前是實驗性的
譯者注：如果發現瀏覽器兼容表里attr()的高級用法依舊沒有良好的支持的話 ， 本文大部分內容都是紙上談兵
引用 MDN文檔
CSS代碼如下：
*{ margin: 0; padding: 0;}:root{ --ellipse: 6.25rem;}html, body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #222;}h1{ font-size: 4rem; color: #333; width: 37.5rem; position: relative;}h1::after{ /* attr(attribute_name) */ content:attr(data-text); position: absolute; top: 0; left: 0; color: pink; clip-path: ellipse(var(--ellipse) var(--ellipse) at 0% 50%); animation: move 5s infinite;}@keyframes move{ 0%, 100%{ clip-path: ellipse(var(--ellipse) var(--ellipse) at 0% 50%); } 50%{ clip-path: ellipse(var(--ellipse) var(--ellipse) at 100% 50%); }}實現效果如下：
附代碼 如何利用CSS制作一個聚光燈效果

文章插圖

現在動態的聚光燈效果就完成了 。
但是還有問題 ， 不知道細心的小伙伴發現了沒有 ， 制作成品的文字是 彩色 的 ， 原理就是加上背景圖片 ， 然后將文字作為遮罩 ， 最后把color 改成透明 ， 所以我們要修改一下代碼 。
在 h1:after 中新增代碼 background-image 和 background-clip ：
【附代碼 如何利用CSS制作一個聚光燈效果】h1::after{ /* 別忘記修改color為透明 */ color: transparent; background-image: linear-gradient(to left,#1a2a6c,#b21f1f,#fdbb2d); background-clip: text; /* 因為background-clip是預覽階段的css屬性 ， 要加上一個前綴版本 */ -webkit-background-clip: text;}看一下最終的完成效果：
附代碼 如何利用CSS制作一個聚光燈效果

文章插圖

演示的源代碼在這里 CodePen 鏈接：
https://codepen.io/jackbrens/pen/MWrGNed
總結以上就是本次分享的全部內容~~
如果覺得文章寫得不錯 ， 對你有所啟發的 ， 請不要吝嗇 點個 贊 和 關注 并在 評論區 留下你寶貴的意見哦~~
（學習視頻分享：web前端）
以上就是如何利用CSS制作一個聚光燈效果（附代碼）的詳細內容 ， 更多請關注電腦自學網其它相關文章！

    推薦閱讀