【css艺术】铃铛🔔还是灯捏

开发调优
,
1

预览图

image
image506×547 11.4 KB

代码

    html,
    body {
      width: 100%;
      height: 100%;
      background: #2e2e2e;
      display: grid;
      place-items: center;
      /* z-index: -1; */
    }

    div {
      width: 120px;
      height: 120px;
      background-color: #e08027;
      border-radius: 60px 60px 10px 10px;
      position: relative;
      transform-style: preserve-3d;
    }

    div::before {
      content: '';
      width: 50px;
      height: 50px;
      background-color: #f2ad43;
      border-radius: 50%;
      position: absolute;
      top: -25px;
      left: 35px;
      box-shadow: 0 120px #824b20, 0 120px 40px #e08027;
      /* z-index: -1; */
      transform: translateZ(-0.1px)
    }

这里说一下，我们通常使用的是 z-index 来调整层级，其实我们也可以使用3D转换调整z轴参数来达到相同视觉效果，这个小方法在 奥运五环 中我也使用过，这里权当复习咯。学而时习之，不亦说乎！

9 Likes
2

我丢，按错直接发了 :tieba_087:

3 Likes
3

我丢，似铃铛更似灯
2 Likes
4

丸辣，明天没水的了 :bili_018:

2 Likes
5

一个光头背对着我答辩

2 Likes
6

我敲！这可不兴~

2 Likes
7

下面有光，但是这个灯又长得像铃铛。要不我给它取个名字叫铃铛灯吧 :bili_040:

2 Likes
8

我说也没有看到发光的那个，灯芯的div在哪里啊。
再一看，竟然是在box-shadow中把灯芯和发光都做了。
真的是很六。

大鹅老师，六六六

2 Likes
9

好名字，哈比~

3 Likes
10

这种发光一般都直接用阴影解决，还可以复制图形喔 :smiley:

2 Likes
11

形状看起来很眼熟

2 Likes
12

王八下金蛋!

2 Likes
13

大鹅还是太强了！

1 Like
14

前端大佬你好，前端大佬再见

2 Likes
15

发光的铃铛 :rofl:

2 Likes
16

我来起名了

《背着身的光头》

2 Likes