寧靜的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>


  
  暑假的十大旅遊景點



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

.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中文網其他相關文章！