论坛 › 马黑黑教程专版 › 修饰一下黑氏时钟小播

马黑黑 发表于 2023-3-16 07:21

修饰一下黑氏时钟小播

<style>
#mydiv {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background: lightgreen;
        box-shadow: 0 0 40px 20px hsla(240,80%,40%,.7) inset, 0 0 40px20px hsla(0,0%,0%,.5);
        border-radius: 50%;
        border: 8px solid hsla(240,90%,50%,.9);
        display: grid;
        place-items: center;
        position: relative;
        cursor: pointer;
        opacity: .8;
        --state: paused;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        width: 6px;
        height: 98px;
        background: snow;
}
#mydiv::before {
        top: 50%;
        background: hsla(240,80%,40%,.7);
        transform-origin: 50% 0;
        animation: swing .3s infinite alternate linear var(--state);
}
#mydiv::after {
        bottom: 50%;
        transform-origin: 50% 100%;
        animation: rot 30s infinite linear var(--state);
}
.ball {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: hsla(240,60%,60%,.9);
        z-index: 2;
}
.ball:nth-of-type(2) {
        top: -8px;
        width: 8px;
        height: 8px;
}
@keyframes swing {
        from {transform: rotate(15deg); }
        to {transform: rotate(-15deg); }
}
@keyframes rot {
        to {transform: rotate(360deg); }
}
</style>

<div id="mydiv"><span class="ball"></span><span class="ball"></span></div>

<script>

let flag = false;

mydiv.addEventListener('click', () => {
        flag =! flag;
        mydiv.style.setProperty('--state', flag ? 'running' : 'paused');
});

</script>

马黑黑 发表于 2023-3-16 07:21

代码
<style>
#mydiv {
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background: lightgreen;
        box-shadow: 0 0 40px 20px hsla(240,80%,40%,.7) inset, 0 0 40px20px hsla(0,0%,0%,.5);
        border-radius: 50%;
        border: 8px solid hsla(240,90%,50%,.9);
        display: grid;
        place-items: center;
        position: relative;
        cursor: pointer;
        opacity: .8;
        --state: paused;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        width: 6px;
        height: 98px;
        background: snow;
}
#mydiv::before {
        top: 50%;
        background: hsla(240,80%,40%,.7);
        transform-origin: 50% 0;
        animation: swing .3s infinite alternate linear var(--state);
}
#mydiv::after {
        bottom: 50%;
        transform-origin: 50% 100%;
        animation: rot 30s infinite linear var(--state);
}
.ball {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: hsla(240,60%,60%,.9);
        z-index: 2;
}
.ball:nth-of-type(2) {
        top: -8px;
        width: 8px;
        height: 8px;
}
@keyframes swing {
        from {transform: rotate(15deg); }
        to {transform: rotate(-15deg); }
}
@keyframes rot {
        to {transform: rotate(360deg); }
}
</style>

<div id="mydiv"><span class="ball"></span><span class="ball"></span></div>

<script>

let flag = false;

mydiv.addEventListener('click', () => {
        flag =! flag;
        mydiv.style.setProperty('--state', flag ? 'running' : 'paused');
});

</script>

红影 发表于 2023-3-16 08:58

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

红影 发表于 2023-3-16 08:59

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

庶民 发表于 2023-3-16 10:37

欣赏，点赞。。。

马黑黑 发表于 2023-3-16 12:21

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

感谢

马黑黑 发表于 2023-3-16 12:21

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

阴影的功效

马黑黑 发表于 2023-3-16 12:21

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

可以再点暂停

梦油 发表于 2023-3-16 14:17

颜色搭配合理、漂亮。

红影 发表于 2023-3-16 15:32

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

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

红影 发表于 2023-3-16 15:32

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

看到了，再点可以让它停下来{:4_173:}

小辣椒 发表于 2023-3-16 16:46

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

马黑黑 发表于 2023-3-16 17:20

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

有点像

马黑黑 发表于 2023-3-16 17:23

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

这个机制要有的

马黑黑 发表于 2023-3-16 17:23

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

俺是学PS长大的

红影 发表于 2023-3-16 20:54

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

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

红影 发表于 2023-3-16 20:55

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

我这样不会PS的只有羡慕了{:4_173:}

马黑黑 发表于 2023-3-16 20:55

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

PS讲究色彩

马黑黑 发表于 2023-3-16 20:56

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

是的。JS也有些改变

红影 发表于 2023-3-16 21:26

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

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

查看完整版本: 修饰一下黑氏时钟小播