這是前端挑戰 v24.09.04 的提交，Glam Up My Markup: Space
但這也是前端挑戰 v24.09.04，CSS 藝術：空間的提交。
我已經建立了所提供標記的不可讀版本，看起來就像太空中的外星訊號。這就是為什麼這是一次雙重提交——它也適用於 CSS 藝術挑戰賽？
破壞任何設計的一個有趣方法是使用：
* { display: contents }
這“刪除了父節點”，因此如果將其新增至節點的所有子節點，則基本上沒有標籤，只有原始內容。
在我們開始之前，讓我們為 body 添加一些基本樣式：
body { aspect-ratio: 1 / 1; background: radial-gradient(circle at center, #1d2a30 40%, #0B1215 75%, #111); container-type: inline-size; display: grid; margin: 0; width: 100vw;
我們設定一個正方形（長寬比）作為網格，具有放射狀背景。
接下來，我們設定子元素：
:is(footer, header, section) { * { display: contents; } font-size: 3cqi; grid-area: 1 / 1; height: 25cqi; overflow: hidden; place-content: center; place-self: center; text-align: center; width: 80cqi; }
我們使用「網格堆疊」技術將所有子元素放置在同一個網格單元中。
這給了我們：
真是一團糟！現在，讓我們加入旋轉和顏色：
footer { rotate: 300deg; color: #FFFD; } header { color: #FFFA; } section { &:nth-of-type(1) { rotate: 60deg; color: #FFF4; } &:nth-of-type(2) { rotate: 120deg; color: #FFF9; } &:nth-of-type(3) { rotate: 180deg; color: #FFFE; } &:nth-of-type(4) { rotate: 240deg; color: #FFF7; } }
現在我們得到：
快到了！我們需要做的就是加入一個奇怪的字體和一個搖晃的動畫：
@import url('https://fonts.googleapis.com/css2? family=Redacted+Script&display=swap'); @keyframes shake { 0% { transform: skewY(-15deg); } 1% { transform: skewY(15deg); } 2% { transform: skewY(-15deg); } 3% { transform: skewY(15deg); } 4%, 100% { transform: skewY(0deg); translate: 0; } 5% { translate: -100vw -50vw; } 6% { translate: 100vw 50vw; } 7% { translate: 0; } }
以上是外星訊號的詳細內容。更多資訊請關注PHP中文網其他相關文章！
