首页  >  文章  >  web前端  >  火箭表情符号

火箭表情符号

WBOY
WBOY原创
2024-09-09 08:30:32524浏览

Rocket Emoji

这是前端挑战 v24.09.04,CSS 艺术:空间的提交。

灵感

此提交的灵感来自于庆祝人们在聊天中取得的成功。用于确认胜利的一种与太空相关的表情符号是火箭表情符号。

演示

旅行

这次挑战提供了极好的学习体验。任务是使用 CSS 和 HTML 创建火箭表情符号,其中涉及制作网站上通常不常见的形状。
我首先将图像分成 8 部分:

  1. 身体
  2. 鼻锥
  3. 窗户
  4. 左鳍
  5. 中鳍
  6. 右鳍
  7. 喷嘴
  8. 火焰

Body 是一个旋转 45 度的 div 元素,每个角都添加了边框半径以使其具有圆形外观。该元素包含鼻锥窗口Nose Cone 是一个 div 元素,其边框半径为 50%,使其成为一个圆形。它位于主体的顶部。 窗口鼻锥 类似,但它有一个边框给它一个窗框,并且它位于主体 的中心附近。 Left Fin 是一个具有 Clip-path 属性的 div 元素。使用此属性我可以定义一个多边形,它允许我绘制鳍。 Middle Fin 是一个带圆角的 div 元素。 右鳍左鳍类似,但它是倒置的。 Nozzle 是一个带圆角的矩形 div 元素。 Flame 是一个方形 div 元素,每个角的边框半径不同。 火焰添加了颜色更深的边框,使其看起来更像火焰。 Flame 添加了动画,它只是每 2 秒无限期地更改大小和不透明度。背景是一系列径向渐变属性,用于在不同位置创建不同大小的随机白色圆圈。

我学习了一些新的 CSS 技术,包括如何创建动画和多边形。未来,我希望为火箭添加更多动画。

以上是火箭表情符号的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn