首頁 >web前端 >css教學 >寧靜的CSS發光效果

寧靜的CSS發光效果

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌原創
2025-03-15 11:28:13948瀏覽

寧靜的CSS發光效果

傍晚的陽光通過葉子過濾會產生寧靜,溫暖的光芒。藝術家精心運用這種“斑駁的光”來實現柔和,令人著迷的效果。我們可以在網絡設計中復制這種迷人的外觀,將新的生命呼吸到平凡的內容中,通過將其應用於照片和插圖。該教程展示了一種基於CSS的簡單方法。

在深入探討代碼之前,了解Light的構圖至關重要。它由大型,圓形或橢圓形的光斑塊組成,上面散佈著葉子鑄造的陰影 - 光滑過葉子和樹枝。這些陰影通常表現出柔軟的,模糊的邊緣,這是光線穿過許多,較少定義的空間的結果,在光線從遠處施放陰影時散射和扭曲。

觀察純白色的牆壁和用斑駁的光照亮的牆壁之間的區別:[說明性比較會在這裡進行]

該教程使用文本(字母,符號,表情符號)重新創建效果,利用CSS陰影並融合模仿自然的藝術性。還將探索替代方法。

設置舞台

我們將使用文本元素(字母,符號,表情符號)來表示光斑。這些將是蒼白,半透明的顏色,旨在產生柔軟的,擴散的效果,而不是鮮明的對比。橢圓形或長方形的字符是理想的,反映了斑駁的光的各種形狀。實驗是實現所需美學的關鍵。在此示例中,我們將使用?,?和\作為其橢圓形和傾斜的形式。

這些字符包裹在.backdrop父元素中的段落中:

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\ \</p>
</div>

.backdrop充當光線和陰影的表面。它使用背景圖像進行紋理,具有明顯的寬度和高度,並且overflow: hidden以包含超越其邊界的陰影。 CSS電網將光元素集中為中心:

 .backdrop {
  背景:中心 /封面no-repeat URL('image.jpeg');
  寬度:400px;身高:240px;
  溢出:隱藏;
  顯示:網格;
}
.backdrop> * {
  網格區域:1/1;
}

精確的形狀對齊並不關鍵;重疊就足夠了。可以隨意調整定位,以獲取獨特的亮光圖案。

用CSS造型亮點

表情符號的關鍵CSS屬性是:透明顏色,半透明的黑色背景(使用rgba() ),模糊的白色文本遮陽,大字體大小和用於平滑的mix-blend-mode

 。形狀{
  顏色:透明;
  背景色:RGBA(0,0,0,0.3);
  文本陰影:0 0 40px #fff;
  字體:Bolder 320pt/320pt Monospace;
  混合模式:乘法;
}

mix-blend-mode: multiply元素的顏色與其容器混合在一起,從而使背景可以通過淺色顯示,同時保持深色,從而產生更自然的淡淡的光效果。

精煉顏色和對比度

為了增強背景圖像的亮度, filter: brightness(1.6) 。另外, background-blend-mode可以混合多個背景。表情符號也可以用作背景圖像,如下所示:

<svg xmlns="http://www.w3.org/2000/svg"><foreignobject height="240px" width="400px"><div style="font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);" xmlns="http://www.w3.org/1999/xhtml">
      ?
    </div>
  </foreignobject></svg>

對於自定義圖像形狀,使用CSS blur()濾波器模糊邊緣以形成軟光效果。 @supports可用於特定於瀏覽器的陰影調整。

讓我們重新審視初始示例並添加內容:

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\ \</p>
</div>

寧靜的CSS發光效果 暑假的十大旅遊景點


這是最受歡迎的地方...

.backdrop.shapes樣式保持不變。 <code>.content

動畫光源

使用.backdrop:hover上的@keyframes添加了一個微妙的動畫:

 .backdrop:懸停>。形狀:nth-​​type(1){
  動畫:2s輕鬆無限的備用移動;
}
.backdrop:懸停>。形狀:type(2):徘徊{
  動畫:4s輕鬆無限的備用移動1;
}

@keyframes移動{
  來自{text -indent:-20px; }
  到{text-indent:20px; }
}
@keyframes move-1 {
  來自{text -indent:-60px; }
  到{text-indent:40px; }
}

動畫text-indent會產生微妙的動作,模擬雲的變化並改變光方向。

結論

該教程演示瞭如何使用CSS創建斑駁的光效果,從自然和藝術中汲取靈感。關鍵在於使用模糊的文本陰影將顏色應用於文本元素,以使陰影的光和半透明背景。具有足夠對比度的紋理背景完成了效果。

以上是寧靜的CSS發光效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn