小編精選 - 技術文章翻譯 · 04月03日

CodePen TV 的祕密

關於使用 CSS 建立 CRT 電視，你一直想知道的七個致命問題。

一次深入幕後的真實探秘。

（1）我的第一個純CSS藝術專案！ 😮

你真的相信嗎？是的。不過話說回來，我之前太沉迷於 SASS 了，直到……嗯，我在上一篇文章裡解釋過了，總之，這算是我第一個真正意義上的純 CSS 作品！我本來想加點白噪音和通道點擊效果，但這需要用到 JavaScript，所以你們就自己想像一下吧。這也是我第一次使用 `corner-shape: squircle目前還不支援這個屬性，不過算了！我覺得對於 CRT 顯示器來說，使用 squircle 是必要的！

（2）點亮 CodePen 的標誌。 🌅

那個旋轉立方體左邊真的有立體立體光，做起來花了老半天時間，而且效果幾乎看不出來。所以我就想在這裡提一下😅

https://codepen.io/ivorjetski/pen/qEaRjBw

電視畫面中的光線也與電視機本身的光線相反，我原本以為這樣能更好地表現電視廣播的效果。不過我覺得這一點不太明顯 :)

（3）音量控制會使掃描線失真。 🔊

我原以為這會表現為音量增大干擾調諧，就像沒有接地環路隔離時一樣。

（4）旋轉旋鈕。 🛞

讓旋鈕看起來像是在旋轉，同時高光保持在右上角，這可真不容易。不過虛線邊框在這裡發揮了作用。

（5）玻璃上的倒影不可能是正方形的！ 😎

為了模擬陰極射線管形狀的扭曲，視窗反射完全由重複的右虛線邊框構成。這些邊框在不同的瀏覽器引擎下看起來差異很大。 Blink 的虛線大小幾乎完美地模擬了真實的視窗窗格。但這是一種很奇怪的視窗繪製方式。

 &, &:before, &:after {
     width: 31rem;
     height: 100rem;
     border: solid 7rem transparent;
     border-right: dashed 7rem hsla( var(--wht-hsl),.05);
     background: transparent;
     border-radius: 50%;
 }

（6）它響應迅速！ 📱

電視螢幕佈局會根據螢幕尺寸而變化。我可是費了好大勁才搞定 REM 和寬高比！

（7）CodePen 2.0 的標誌。 🖋️

旋轉的 2.0 實際上毫無意義。它確實以 90 度角transform:scaleX(-1) ，使得 2.0 在正面和背面都從左到右顯示。

還有一件事… 🕵️

YouTube 的影片片頭完全是用 CSS 做的！我把之前的兩個專案改成了這個片頭，當然也包括這個。配樂是我和 Robert Frogley 專門為這個影片創作的。

先別聲張🤫，我做這個影片時截的大部分圖都丟了，因為我的筆記型電腦壞了，修的時候硬碟也被格式化了。所以很鬱悶，我不得不撤銷之前的所有操作，重新截圖，然後再倒回去播放！ 😮

原文出處：https://dev.to/ivorjetski/codepen-tv-secrets-fib