修饰一下黑氏时钟小播

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 50px auto;
   
4.         width: 200px;
   
5.         height: 200px;
   
6.         background: lightgreen;
   
7.         box-shadow: 0 0 40px 20px hsla(240,80%,40%,.7) inset, 0 0 40px  20px hsla(0,0%,0%,.5);
   
8.         border-radius: 50%;
   
9.         border: 8px solid hsla(240,90%,50%,.9);
   
10.         display: grid;
    
11.         place-items: center;
    
12.         position: relative;
    
13.         cursor: pointer;
    
14.         opacity: .8;
    
15.         --state: paused;
    
16. }
    
17. #mydiv::before, #mydiv::after {
    
18.         position: absolute;
    
19.         content: '';
    
20.         width: 6px;
    
21.         height: 98px;
    
22.         background: snow;
    
23. }
    
24. #mydiv::before {
    
25.         top: 50%;
    
26.         background: hsla(240,80%,40%,.7);
    
27.         transform-origin: 50% 0;
    
28.         animation: swing .3s infinite alternate linear var(--state);
    
29. }
    
30. #mydiv::after {
    
31.         bottom: 50%;
    
32.         transform-origin: 50% 100%;
    
33.         animation: rot 30s infinite linear var(--state);
    
34. }
    
35. .ball {
    
36.         position: absolute;
    
37.         width: 15px;
    
38.         height: 15px;
    
39.         border-radius: 50%;
    
40.         background: hsla(240,60%,60%,.9);
    
41.         z-index: 2;
    
42. }
    
43. .ball:nth-of-type(2) {
    
44.         top: -8px;
    
45.         width: 8px;
    
46.         height: 8px;
    
47. }
    
48. @keyframes swing {
    
49.         from {transform: rotate(15deg); }
    
50.         to {transform: rotate(-15deg); }
    
51. }
    
52. @keyframes rot {
    
53.         to {transform: rotate(360deg); }
    
54. }
    
55. </style>
    
56. 
    
57. <div id="mydiv"><span class="ball"></span><span class="ball"></span></div>
    
58. 
    
59. <script>
    
60. 
    
61. let flag = false;
    
62. 
    
63. mydiv.addEventListener('click', () => {
    
64.         flag =! flag;
    
65.         mydiv.style.setProperty('--state', flag ? 'running' : 'paused');
    
66. });
    
67. 
    
68. </script>
    

复制代码

红影

这下子更像钟表了呢，配色真漂亮，里面好像有光亮透出来

红影

这个还没配音乐呢，目前的，点一下就是永动机

庶民

欣赏，点赞。。。

马黑黑

庶民 发表于 2023-3-16 10:37
欣赏，点赞。。。

感谢

马黑黑

红影 发表于 2023-3-16 08:58
这下子更像钟表了呢，配色真漂亮，里面好像有光亮透出来

阴影的功效

马黑黑

红影 发表于 2023-3-16 08:59
这个还没配音乐呢，目前的，点一下就是永动机

可以再点暂停

梦油

颜色搭配合理、漂亮。

红影

马黑黑 发表于 2023-3-16 12:21
阴影的功效

漂亮，黑黑对颜色的掌控很厉害。

红影

马黑黑 发表于 2023-3-16 12:21
可以再点暂停

看到了，再点可以让它停下来

小辣椒

加了阴影效果，更加像钟了

马黑黑

小辣椒 发表于 2023-3-16 16:46
加了阴影效果，更加像钟了

有点像

马黑黑

红影 发表于 2023-3-16 15:32
看到了，再点可以让它停下来

这个机制要有的

马黑黑

红影 发表于 2023-3-16 15:32
漂亮，黑黑对颜色的掌控很厉害。

俺是学PS长大的

红影

马黑黑 发表于 2023-3-16 17:23
这个机制要有的

看到你又出品了个和音乐关联的，两个对照着看，可以用来学习如何关联音乐了

红影

马黑黑 发表于 2023-3-16 17:23
俺是学PS长大的

我这样不会PS的只有羡慕了

马黑黑

红影 发表于 2023-3-16 20:55
我这样不会PS的只有羡慕了

PS讲究色彩

马黑黑

红影 发表于 2023-3-16 20:54
看到你又出品了个和音乐关联的，两个对照着看，可以用来学习如何关联音乐了

是的。JS也有些改变

红影

马黑黑 发表于 2023-3-16 20:55
PS讲究色彩

那个软件太复杂了，我就不学了。