梦江南 发表于 2024-8-4 14:10

学习帖【海边的女孩】


<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 574px;
        background: url('http://tuku.link/imgs/2024/08/5759502c88519010.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=1893352364" 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-4 14:44

这个好，加了个小朋友和一只鹰，让这海滩更有趣味了{:4_199:}

红影 发表于 2024-8-4 14:45

到底会作图就是好，这透明图加得真好{:4_187:}

梦江南 发表于 2024-8-4 15:30

红影 发表于 2024-8-4 14:44
这个好，加了个小朋友和一只鹰，让这海滩更有趣味了

想不出，只能加上小女孩和鹰，简单点了。下午问好！{:4_204:}

梦江南 发表于 2024-8-4 15:32

红影 发表于 2024-8-4 14:45
到底会作图就是好，这透明图加得真好

用PS和美图秀秀做出来的。谢谢影子支持鼓励！{:4_204:}

梦油 发表于 2024-8-4 16:53

小姑娘真可爱。

梦江南 发表于 2024-8-4 16:58

梦油 发表于 2024-8-4 16:53
小姑娘真可爱。

谢谢棼油老师支持，问好！{:4_204:}

起个网名好难 发表于 2024-8-4 17:41

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

红影 发表于 2024-8-4 22:08

梦江南 发表于 2024-8-4 15:30
想不出，只能加上小女孩和鹰，简单点了。下午问好！

很好啊，让这个背景更有韵味了呢{:4_187:}

红影 发表于 2024-8-4 22:09

梦江南 发表于 2024-8-4 15:32
用PS和美图秀秀做出来的。谢谢影子支持鼓励！

很漂亮，梦江南辛苦了{:4_187:}

梦江南 发表于 2024-8-5 08:49

起个网名好难 发表于 2024-8-4 17:41


问好老师，谢谢欣赏！祝夏日安康！{:4_204:}

梦江南 发表于 2024-8-5 08:51

红影 发表于 2024-8-4 22:08
很好啊，让这个背景更有韵味了呢

对老师的代码不会变通，只能这样了。周一快乐！{:4_204:}

梦江南 发表于 2024-8-5 08:52

红影 发表于 2024-8-4 22:09
很漂亮，梦江南辛苦了

没辛苦啦。是您辛苦了！{:4_204:}

梦油 发表于 2024-8-5 10:48

梦江南 发表于 2024-8-4 16:58
谢谢棼油老师支持，问好！

这个小图你选得好！

红影 发表于 2024-8-5 21:08

梦江南 发表于 2024-8-5 08:51
对老师的代码不会变通，只能这样了。周一快乐！

江南可以自己去找点视频和播放器按钮，换上去说不定有更奇妙的效果呢{:4_187:}

红影 发表于 2024-8-5 21:08

梦江南 发表于 2024-8-5 08:52
没辛苦啦。是您辛苦了！

这构思很好，到底会作图就是不一样呢{:4_199:}

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

红影 发表于 2024-8-5 21:08
江南可以自己去找点视频和播放器按钮，换上去说不定有更奇妙的效果呢

回影子，视频不好找，不知你们的视频是从哪里找来的。{:4_204:}

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

红影 发表于 2024-8-5 21:08
这构思很好，到底会作图就是不一样呢

这也是简单的作图，不会用代码。

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

梦江南 发表于 2024-8-6 08:24
回影子，视频不好找，不知你们的视频是从哪里找来的。

我们都是在https://www.tukuppt.com/video/ 找的。

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

梦江南 发表于 2024-8-6 08:25
这也是简单的作图，不会用代码。

去到你的帖子里才看到，原来你把女孩和鹰都是直接做到图里了？
这样图片会很大，可以另外加两个小图的啊，开始以为你是另外加的呢{:4_173:}
页: [1] 2
查看完整版本: 学习帖【海边的女孩】