马黑黑 发表于 2023-3-23 20:13

小遥控器

<style>
#mydiv {
        width: 80px;
        height: 160px;
        background: black;
        border-radius: 8px;
        box-shadow: 6px 4px 12px black;
        position: relative;
        pointer-events: none;
        --state: running;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
}
#mydiv::before {
        width: 30px;
        height: 30px;
        left: calc(50% - 15px);
        bottom: 15px;
        border-radius: 50%;
        background: darkgreen;
        pointer-events: auto;
        cursor: pointer;
        border: 2px solid snow;
        box-shadow: 0 0 10px white;
        animation: flash .2s infinite alternate var(--state);
}
#mydiv::after {
        content:attr(data-tt);
        top: 6px; right: 6px; bottom: 60px; left: 6px;
        background: #333;
        color: green;
        text-align: center;
        padding: 4px;
        white-space:pre;
}
@keyframes flash {
        to { box-shadow: 0 0 30px white; }
}
</style>

<div id="mydiv" data-tt="小遥控器&#10;&#10;00:00&#10;00:00"></div>

马黑黑 发表于 2023-3-23 20:14

本帖最后由 马黑黑 于 2023-3-23 20:16 编辑

代码
<style>
#mydiv {
      width: 80px;
      height: 160px;
      background: black;
      border-radius: 8px;
      box-shadow: 6px 4px 12px black;
      position: relative;
      pointer-events: none;
      --state: running;
}
#mydiv::before, #mydiv::after {
      position: absolute;
      content: '';
}
#mydiv::before {
      width: 30px;
      height: 30px;
      left: calc(50% - 15px);
      bottom: 15px;
      border-radius: 50%;
      background: darkgreen;
      pointer-events: auto;
      cursor: pointer;
      border: 2px solid snow;
      box-shadow: 0 0 10px white;
      animation: flash .2s infinite alternate var(--state);
}
#mydiv::after {
      content:attr(data-tt);
      top: 6px; right: 6px; bottom: 60px; left: 6px;
      background: #333;
      color: green;
      text-align: center;
      padding: 4px;
      white-space:pre;
}
@keyframes flash {
      to { box-shadow: 0 0 30px white; }
}
</style>

<div id="mydiv" data-tt="小遥控器"></div>


千羽 发表于 2023-3-23 20:41


漂亮的小小遥控器，黑黑老师精彩不断{:4_187:}

小辣椒 发表于 2023-3-23 20:52

这个是遥控器啊{:4_199:}

马黑黑 发表于 2023-3-23 21:22

小辣椒 发表于 2023-3-23 20:52
这个是遥控器啊

黑氏遥控器

红影 发表于 2023-3-23 21:40

这个很小巧，像以前的MP3播放器{:4_173:}

马黑黑 发表于 2023-3-23 21:43

红影 发表于 2023-3-23 21:40
这个很小巧，像以前的MP3播放器

{:4_181:}

红影 发表于 2023-3-23 22:43

马黑黑 发表于 2023-3-23 21:43


咋不关联个音乐什么的呢？

马黑黑 发表于 2023-3-23 23:18

红影 发表于 2023-3-23 22:43
咋不关联个音乐什么的呢？

这个讲了那么多，好像应该会了吧

梦油 发表于 2023-3-24 10:01

下面的圆还在不断的山观呢，似乎是在发射信号。

马黑黑 发表于 2023-3-24 12:03

梦油 发表于 2023-3-24 10:01
下面的圆还在不断的山观呢，似乎是在发射信号。

呵呵，观察的真仔细

马黑黑 发表于 2023-3-24 12:03

千羽 发表于 2023-3-23 20:41
漂亮的小小遥控器，黑黑老师精彩不断

感谢支持

马黑黑 发表于 2023-3-24 12:04

小辣椒 发表于 2023-3-23 20:52
这个是遥控器啊

是的，黑氏遥控器，不是黑市额

梦油 发表于 2023-3-24 13:34

马黑黑 发表于 2023-3-24 12:03
呵呵，观察的真仔细

你做的真巧妙。

红影 发表于 2023-3-24 14:39

马黑黑 发表于 2023-3-23 23:18
这个讲了那么多，好像应该会了吧

还是习惯了跟在后面套用啊{:4_173:}

马黑黑 发表于 2023-3-24 17:26

红影 发表于 2023-3-24 14:39
还是习惯了跟在后面套用啊

真正自己弄一个，会有突飞猛进的进步

马黑黑 发表于 2023-3-24 17:36

梦油 发表于 2023-3-24 13:34
你做的真巧妙。

粗糙了一点

梦油 发表于 2023-3-24 17:52

马黑黑 发表于 2023-3-24 17:36
粗糙了一点

设计的很巧妙。

马黑黑 发表于 2023-3-24 17:53

梦油 发表于 2023-3-24 17:52
设计的很巧妙。

过得去吧

梦油 发表于 2023-3-24 17:57

马黑黑 发表于 2023-3-24 17:53
过得去吧

你是心灵手巧啊
页: [1] 2 3
查看完整版本: 小遥控器