梦江南 发表于 2024-8-5 15:35

荷塘月色


<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 574px;
        background: url('http://tuku.link/imgs/2024/08/d0db12e29efcc5f1.gif') no-repeat center/cover;
        display: grid;
        place-items: center;
        pointer-events: none;
        box-shadow: 0 0 6px rgba(0,0,0,.6);
        z-index: 1;
        position: relative;
        --conic: 2%;
}
#mydiv::after {
        position: absolute;
        content: '';
        top: 20px;
        width: 120px;
        height: 120px;
        background: repeating-conic-gradient(transparent, green, transparent var(--conic));
        -webkit-mask: url('https://638183.freep.cn/638183/small/4yc.png') no-repeat center/cover;
        pointer-events: auto;
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
#mydiv:hover::after { --conic: 4%; }
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask: linear-gradient(to bottom left, transparent, transparent, red);
}
@keyframes rot {
        to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5235635" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/96/5b4f838b05080.mp4" autoplay loop muted></video>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => {
        mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦油 发表于 2024-8-5 16:12

清凉世界、陶情适性。

梦江南 发表于 2024-8-5 16:18

本帖最后由 梦江南 于 2024-8-5 17:59 编辑

梦油 发表于 2024-8-5 16:12
清凉世界、陶情适性。
天热看见绿色的，人心情愉悦点。谢谢梦油老师沙发支持。{:4_204:}

起个网名好难 发表于 2024-8-5 16:44

https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif

红影 发表于 2024-8-5 20:20

好漂亮的制作，水的视频用得好，还添加了动态的小鱼儿。
这个制作好美。欣赏梦江南好帖{:4_199:}

红影 发表于 2024-8-5 20:24

荷叶上一闪一闪的原来是青蛙的眼睛，开始还以为是小蝴蝶呢{:4_173:}

梦江南 发表于 2024-8-6 08:17

起个网名好难 发表于 2024-8-5 16:44


问好老师，谢谢支持，这动图小孩好可爱。天热多保重！{:4_204:}

梦江南 发表于 2024-8-6 08:18

红影 发表于 2024-8-5 20:20
好漂亮的制作，水的视频用得好，还添加了动态的小鱼儿。
这个制作好美。欣赏梦江南好帖

问好影子，谢谢支持鼓励。天热多保重！{:4_204:}{:4_204:}

梦江南 发表于 2024-8-6 08:22

红影 发表于 2024-8-5 20:24
荷叶上一闪一闪的原来是青蛙的眼睛，开始还以为是小蝴蝶呢

考虑夜晚不适宜放蝴蝶，还是用青蛙比较适宜，就放了青蛙。{:4_173:}
https://pic.imgdb.cn/item/666f8259d9c307b7e96c3ff7.gif

梦油 发表于 2024-8-6 10:39

梦江南 发表于 2024-8-5 16:18
天热看见绿色的，人心情愉悦点。谢谢梦油老师沙发支持。

是啊，心静自然凉。

梦江南 发表于 2024-8-6 17:07

梦油 发表于 2024-8-6 10:39
是啊，心静自然凉。

谢谢梦油老师赞同。{:4_204:}

小九 发表于 2024-8-6 18:19

美与清凉的氛围，这个和在空调屋里的感受不一样哈，欣赏！{:4_187:}

红影 发表于 2024-8-6 21:15

梦江南 发表于 2024-8-6 08:18
问好影子，谢谢支持鼓励。天热多保重！

这样的场所很清凉{:4_173:}

红影 发表于 2024-8-6 21:16

梦江南 发表于 2024-8-6 08:22
考虑夜晚不适宜放蝴蝶，还是用青蛙比较适宜，就放了青蛙。

青蛙和荷叶颜色相近，开始真没注意，那两字动态的眼睛好，否则就错过青蛙了{:4_173:}

梦江南 发表于 2024-8-7 08:47

小九 发表于 2024-8-6 18:19
美与清凉的氛围，这个和在空调屋里的感受不一样哈，欣赏！

谢谢小九分享支持，您 说得我也清凉起来了。立秋安康！{:4_204:}{:4_173:}

梦油 发表于 2024-8-7 15:09

梦江南 发表于 2024-8-6 17:07
谢谢梦油老师赞同。

不客气

梦江南 发表于 2024-8-7 15:13

梦油 发表于 2024-8-7 15:09
不客气

立秋快乐！

梦油 发表于 2024-8-7 16:38

梦江南 发表于 2024-8-7 15:13
立秋快乐！

秋老虎更可怕，双中伏要到13号呢。

梦江南 发表于 2024-8-8 17:19

梦油 发表于 2024-8-7 16:38
秋老虎更可怕，双中伏要到13号呢。

是的，就慢慢熬吧。

梦江南 发表于 2024-8-8 17:20

红影 发表于 2024-8-6 21:15
这样的场所很清凉

立秋过后，也很热的。多注意喝水。
页: [1] 2 3
查看完整版本: 荷塘月色