这是前端挑战 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中文网其他相关文章！
