这是前端挑战 v24.09.04,CSS 艺术:空间的提交。
此提交的灵感来自于庆祝人们在聊天中取得的成功。用于确认胜利的一种与太空相关的表情符号是火箭表情符号。
这次挑战提供了极好的学习体验。任务是使用 CSS 和 HTML 创建火箭表情符号,其中涉及制作网站上通常不常见的形状。
我首先将图像分成 8 部分:
Body 是一个旋转 45 度的 div 元素,每个角都添加了边框半径以使其具有圆形外观。该元素包含鼻锥和窗口。 Nose Cone 是一个 div 元素,其边框半径为 50%,使其成为一个圆形。它位于主体的顶部。 窗口 与鼻锥 类似,但它有一个边框给它一个窗框,并且它位于主体 的中心附近。 Left Fin 是一个具有 Clip-path 属性的 div 元素。使用此属性我可以定义一个多边形,它允许我绘制鳍。 Middle Fin 是一个带圆角的 div 元素。 右鳍与左鳍类似,但它是倒置的。 Nozzle 是一个带圆角的矩形 div 元素。 Flame 是一个方形 div 元素,每个角的边框半径不同。 火焰添加了颜色更深的边框,使其看起来更像火焰。 Flame 添加了动画,它只是每 2 秒无限期地更改大小和不透明度。背景是一系列径向渐变属性,用于在不同位置创建不同大小的随机白色圆圈。
我学习了一些新的 CSS 技术,包括如何创建动画和多边形。未来,我希望为火箭添加更多动画。
以上是火箭表情符号的详细内容。更多信息请关注PHP中文网其他相关文章!