论坛 › 欢乐水吧 › 太湖美 TO：樵哥哥 （套用一个黑黑云水逸效果）

小辣椒 发表于 2024-2-15 14:44

太湖美 TO：樵哥哥 （套用一个黑黑云水逸效果）

<style>
#papa {margin: 150px 0 0 calc(50% - 781px);position: relative; width: 1400px; height: 770px; background: lightblue url('https://xlaj.cn/assets/file/zp/20231105220001.gif') no-repeat center/cover; box-shadow: 2px 4px 8px black; border: 8px ridge lightgreen; overflow: hidden; }
#vid { position: absolute; top: -70px; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; transform: scale(-1,1); }
#player { position: absolute; left: 960px; top: 500px; width: 200px; height: 200px; border-radius: 50%; filter: drop-shadow(3px 3px 8px darkgreen); cursor: pointer; transform: scale(var(--size)) rotate(0); animation: rotating 8s linear infinite var(--state); --size: 1.2; }
#player::before { position: absolute; content: ''; inset: 22px; border-radius: 50%; background: radial-gradient(Yellow, transparent); box-shadow: 0 0 2px red, inset 0 0 60px lightblue; }
ye-zi { position: absolute; transform: rotate(60deg); offset-path: path('M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100'); offset-distance: 50%; }
ye-zi::before, ye-zi::after { position: absolute; content: ''; width: 8px; height: 40px; border-radius: 10% 60%; background: linear-gradient(lightgreen, green, lightgreen); transform-origin: 50% 100%; }
ye-zi::after { transform: rotate(45deg); }
@keyframes rotating { to { transform: scale(var(--size)) rotate(-360deg); } }
#dt3{ position: absolute; width: 150px; height: 150px; top: 459px; left:76px; }

</style>

<div id="papa">

<img id="dt3" src="https://xlaj.cn/assets/file/zp/20240215142806.png" alt="" />
        <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2023/11/18/yy/01.mp3" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/01/79/5b4a079dd190a.mp4" loop muted></video>
        <div id="player"></div>
</div>

<script>
var all = 12;
Array.from({length: all}).forEach((item,key) => {
        item = document.createElement('ye-zi');
        item.style.cssText += `offset-distance: ${100 * key / all}%;`;
        player.prepend(item);
});

var mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-2-15 14:44

@樵歌

樵哥哥这条鱼眼熟吧{:4_170:}

小辣椒 发表于 2024-2-15 14:46

@马黑黑

黑黑套用一个，就修改了播放器圆的颜色，本来准备做个大树，然后树叶加上去，结果不行，这些路径我做不好{:4_173:}

小辣椒 发表于 2024-2-15 14:48

旧图，旧音乐，求速度了，主要是送樵哥哥的，看看船头樵哥哥钓鱼的兴奋就知道美女相陪钓鱼的成果不错，还有一条大鱼的，今天上去就一条小的{:4_172:}

小辣椒 发表于 2024-2-15 14:50

太湖水质特别好，鱼也是多，樵哥哥钓鱼高手，可以大显身手了{:4_170:}

梦油 发表于 2024-2-15 15:11

美图、美乐、美制作！欣赏优秀作品好惬意。

红影 发表于 2024-2-15 16:30

原来是樵歌钓的那条啊，他昨天不是钓了2条的么{:4_173:}
不过这条更名贵吧，看他说好几百一斤呢{:4_173:}

红影 发表于 2024-2-15 16:30

真漂亮。亲爱的把那视频都留着了啊，真不错，美丽富饶的太湖{:4_199:}

红影 发表于 2024-2-15 16:34

这么大的动图制作呢，真不容易{:4_199:}

亦是金 发表于 2024-2-15 17:53

好景，好歌，好制作！欣赏点赞！{:4_187:}

马黑黑 发表于 2024-2-15 19:13

根据小船的摇摆情况，可以试着给抓鱼的男子做个动画，效果就会很灵动

小辣椒 发表于 2024-2-15 19:40

梦油 发表于 2024-2-15 15:11
美图、美乐、美制作！欣赏优秀作品好惬意。

谢谢梦油欣赏，感谢一直以来的支持{:4_187:}

小辣椒 发表于 2024-2-15 19:42

红影 发表于 2024-2-15 16:30
原来是樵歌钓的那条啊，他昨天不是钓了2条的么
不过这条更名贵吧，看他说好几百一斤呢

这条是他的大鲫鱼，不是那条翘壳鱼{:4_170:}

小辣椒 发表于 2024-2-15 19:43

红影 发表于 2024-2-15 16:30
真漂亮。亲爱的把那视频都留着了啊，真不错，美丽富饶的太湖
这个图是上次送猫猫的背景图，拿来用了，就为了翘哥哥这条鱼

小辣椒 发表于 2024-2-15 19:44

亦是金 发表于 2024-2-15 17:53
好景，好歌，好制作！欣赏点赞！

谢谢前辈欣赏，谢谢点缀！{:4_187:}

小辣椒 发表于 2024-2-15 19:45

马黑黑 发表于 2024-2-15 19:13
根据小船的摇摆情况，可以试着给抓鱼的男子做个动画，效果就会很灵动

这个图的男生脚只有小半，这样做速度的，马上就完成了{:4_170:}

醉美水芙蓉 发表于 2024-2-15 20:11

上海朝阳 发表于 2024-2-15 20:27

水快烧开了，鱼可以下锅了{:4_205:}

樵歌 发表于 2024-2-15 20:49

小辣椒 发表于 2024-2-15 14:44
@樵歌

樵哥哥这条鱼眼熟吧

大熟悉了，不就是身穿红衣红裙涂着红唇膏的美人鱼吗{:4_170:}

红影 发表于 2024-2-15 20:49

小辣椒 发表于 2024-2-15 19:42
这条是他的大鲫鱼，不是那条翘壳鱼

这个帖子太有特点了，完全适合送樵歌呢{:4_173:}

查看完整版本: 太湖美 TO：樵哥哥 （套用一个黑黑云水逸效果）