【黑师代码】因为遇见你（学习黑师《檐下客》小花旋转播放效果）

南无月 发表于 2024-4-30 22:04

本帖最后由南无月于 2024-4-30 22:06 编辑 <br /><br /><style>
#papa {
   margin: 130px 0 0 calc(50% - 931px);
   display: grid;
   place-items: center;
   width: 1700px;
   height: 900px;
   background: lightblue url('https://pic.imgdb.cn/item/65630e26c458853aef977f75.webp') no-repeat center bottom;
   box-shadow: 3px 3px 20px #000;
   position: relative;
            overflow: hidden;
   z-index: 1;
   --state: running;
}
#papa::before {
   position: absolute;
   content: '';
   width: 100%;
   height: 22%;
   bottom: 1px;
   background: inherit;
   filter: url(#turb);
}
#papa > svg { stroke-linecap: round; }
.myfilter { position: absolute; width: 0; height: 0; }
.play_pic {
   position: absolute;
   width: 160px;
   height: 160px;
   right: 100px;
   opacity: .75;
   cursor: pointer;
   animation: rot 6s infinite linear var(--state);
   z-index: 200;
}
.play_pic:nth-of-type(1) {
   width: 300px;
   height: 300px;
   filter: sepia(70%);
}

.play_pic:nth-of-type(2) {
   width: 230px;
   height: 230px;
   filter: hue-rotate(270deg) contrast(125%);
}
@keyframes rot {
   to { transform: rotate(1turn); }
}
#vid {
   position: absolute;
   width: 120%;
   height: 120%;
   top:-100px;
   left:-301px;
   object-fit: cover;
   pointer-events: none;
   mix-blend-mode: screen;
   z-index:3;
   opacity: .46;
}
</style>

<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd401d669.mp4" autoplay="" loop="" muted=""></video>
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1370908141" autoplay loop></audio>
   <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
   <img class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
   <img id="iplay" class="play_pic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
</div><svg class="myfilter"> <filter id="turb" filterunits="objectBoundingBox" x="0" y="0" width="100%" height="100%">    <feturbulence id="feturbulence" type="fractalNoise" numoctaves="3" seed="2"></feturbulence>    <fedisplacementmap xchannelselector="G" ychannelselector="B" scale="20" in="SourceGraphic"></fedisplacementmap> </filter></svg>

<script>(function() {
   let frames = 0, rad = Math.PI / 180;

let lrcAr = [
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,
   ,

];
   let js1 = 'https://638183.freep.cn/638183/web/api/hc_lrc.js',
            js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
   let body = document.querySelector('body'), jsNode = document.createElement('script');
   jsNode.charset = 'utf-8';
   jsNode.setAttribute('src', url);
   body.appendChild(jsNode);
   jsNode.onload = () => callback();
};

   loadJs(js1, () => {
   HCPlayer({
            papa: '#papa',
            lrcAr: lrcAr,
            lrc_css: 'bottom: 20px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); color: #fff;',
   });
});
let fewave = () => {
            let bfx = 0.01, bfy = 0.1;
            frames += 0.5;
            bfx += 0.002 * Math.cos(frames * rad);
            bfy += 0.02 * Math.sin(frames * rad);
            bf = ;
            feturbulence.setAttributeNS(null, 'baseFrequency',bf.join(' '));
            requestAnimationFrame(fewave);
   };

   fewave();

})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br><br><br><br><br>

南无月 发表于 2024-4-30 22:05

@马黑黑 @小辣椒这个是水波效果的另外一种用法。。在下方水里的，更接近原贴。。发来瞧瞧

南无月 发表于 2024-4-30 22:08

https://www.huachaowang.com/forum.php?mod=viewthread&tid=72632&highlight=%E9%DC%CF%C2%BF%CD

《檐下客》，用了小花播

https://www.huachaowang.com/forum.php?mod=viewthread&tid=71809&highlight=%BE%C3%CA%AF%D7j%2B-%2B%D
《久石譲 - 月光の雲海》用了水波

红影发表于 2024-4-30 22:37

这个水波纹好漂亮啊，不说的话，肯定想不到是代码实现的呢。
蓝色的裙子，蓝色的水波纹，月儿的帖子好美啊{:4_199:}

红影发表于 2024-4-30 22:38

这歌儿也很好听呢，喜欢{:4_199:}

马黑黑 发表于 2024-4-30 22:43

效果确实很逼真。赞

樵歌发表于 2024-5-1 07:25

总能把代码升华到自然美，能把黑师的技术用到极致。有大本事的人！

南无月 发表于 2024-5-1 17:18

樵歌发表于 2024-5-1 07:25
总能把代码升华到自然美，能把黑师的技术用到极致。有大本事的人！

感谢樵管一直鼓励支持{:4_190:}

南无月 发表于 2024-5-1 17:19

红影发表于 2024-4-30 22:37
这个水波纹好漂亮啊，不说的话，肯定想不到是代码实现的呢。
蓝色的裙子，蓝色的水波纹，月儿的帖子好美啊 ...

影子的鼓励十分给力，十分感谢{:4_187:}

南无月 发表于 2024-5-1 17:19

红影发表于 2024-4-30 22:38
这歌儿也很好听呢，喜欢

{:4_199:}好哒，你能喜欢就太好啦

南无月 发表于 2024-5-1 17:20

马黑黑发表于 2024-4-30 22:43
效果确实很逼真。赞

用在这个亮点的水里效果更明显一点

樵歌发表于 2024-5-1 20:37

南无月发表于 2024-5-1 17:18
感谢樵管一直鼓励支持

你的作品真的有艺术范儿，很是喜欢。

南无月 发表于 2024-5-1 21:03

樵歌发表于 2024-5-1 20:37
你的作品真的有艺术范儿，很是喜欢。

艺术不敢当，不小心整出来的{:4_170:}

小文发表于 2024-5-1 21:39

美妙

红影发表于 2024-5-2 15:55

南无月发表于 2024-5-1 17:19
影子的鼓励十分给力，十分感谢

应该谢谢月儿带来的美好视听享受才是呢{:4_187:}

红影发表于 2024-5-2 15:56

南无月发表于 2024-5-1 17:19
好哒，你能喜欢就太好啦

月儿的帖子都很喜欢呢{:4_183:}

小辣椒 发表于 2024-5-2 20:40

南无月发表于 2024-4-30 22:05
@马黑黑 @小辣椒这个是水波效果的另外一种用法。。在下方水里的，更接近原贴。。发来瞧瞧

谢谢月月又发一个啊，这个效果我做过的，月月的制作好漂亮

小辣椒 发表于 2024-5-2 20:41

二个都非常的漂亮，月月的代码知识比小辣椒好多了

小辣椒 发表于 2024-5-2 20:42

这个效果我用了一个png，这个水动效果也是很喜欢的

小辣椒 发表于 2024-5-2 20:42

欣赏月月精彩的制作{:4_203:}

页: [1] 2

花潮论坛's Archiver

【黑师代码】因为遇见你（学习黑师《檐下客》小花旋转播放效果）