小遥控器

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         width: 80px;
   
4.         height: 160px;
   
5.         background: black;
   
6.         border-radius: 8px;
   
7.         box-shadow: 6px 4px 12px black;
   
8.         position: relative;
   
9.         pointer-events: none;
   
10.         --state: running;
    
11. }
    
12. #mydiv::before, #mydiv::after {
    
13.         position: absolute;
    
14.         content: '';
    
15. }
    
16. #mydiv::before {
    
17.         width: 30px;
    
18.         height: 30px;
    
19.         left: calc(50% - 15px);
    
20.         bottom: 15px;
    
21.         border-radius: 50%;
    
22.         background: darkgreen;
    
23.         pointer-events: auto;
    
24.         cursor: pointer;
    
25.         border: 2px solid snow;
    
26.         box-shadow: 0 0 10px white;
    
27.         animation: flash .2s infinite alternate var(--state);
    
28. }
    
29. #mydiv::after {
    
30.         content:attr(data-tt);
    
31.         top: 6px; right: 6px; bottom: 60px; left: 6px;
    
32.         background: #333;
    
33.         color: green;
    
34.         text-align: center;
    
35.         padding: 4px;
    
36.         white-space:pre;
    
37. }
    
38. @keyframes flash {
    
39.         to { box-shadow: 0 0 30px white; }
    
40. }
    
41. </style>
    
42. 
    
43. <div id="mydiv" data-tt="小遥控器"></div>
    

复制代码

千羽

漂亮的小小遥控器，黑黑老师精彩不断

小辣椒

这个是遥控器啊

马黑黑

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

黑氏遥控器

红影

这个很小巧，像以前的MP3播放器

马黑黑

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

红影

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

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

马黑黑

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

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

梦油

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

马黑黑

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

呵呵，观察的真仔细

马黑黑

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

感谢支持

马黑黑

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

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

梦油

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

你做的真巧妙。

红影

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

还是习惯了跟在后面套用啊

马黑黑

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

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

马黑黑

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

粗糙了一点

梦油

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

设计的很巧妙。

马黑黑

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

过得去吧

梦油

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

你是心灵手巧啊