论坛 › 音乐沙龙 › 中了3d的毒

马黑黑 发表于 2024-5-22 11:38

中了3d的毒

本帖最后由 马黑黑 于 2024-5-22 12:36 编辑 <br /><br /><style>
    .pa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/3dp.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; border-radius: 6px; z-index: 1; position: relative; }
    #lzpa { position: absolute; left: calc(50% - 200px); top: 60px; width: 400px; height: 240px; cursor: pointer; }
    #lzpa:hover #vid { transform: scale(1.5, 1.2); }
    li-zi { position: absolute; width: 30px; height: 30px; border-radius: 0 100%; box-shadow: -1px -1px 6px rgba(255,255,255,.6); opacity: .8; offset-path: path('M0 120 A200 120 0 1 1 400 120 A200 120 0 1 1 0 120'); animation: move 20s linear infinite var(--state), size 20s linear infinite var(--state); }
    #vid { position: absolute; left: calc(50% - 80px); top: calc(50% - 80px); width: 160px; height: 160px; border-radius:50%; object-fit: cover; pointer-events: none; mix-blend-mode: color-dodge; transition: 2s; }
    @keyframes move { to { offset-distance: 100%; } }
    @keyframes size { 0%, 50%, 100% { transform: scale(1) rotateY(20deg); } 25% { transform: scale(0.5)rotateY(10deg); } 75% { transform: scale(1.5)rotateY(30deg); } }
</style>

<div class="pa">
    <div id="lzpa"><video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f6022657ac.mp4" autoplay loop muted></video></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=865040132" autoplay loop></audio>
</div>

<script>
    var total = 12;
    for(var i = 0; i < total; i ++) {
       var lz = document.createElement('li-zi');
      lz.style.cssText += `
            animation-delay: -${20 / total * i}s;
            background-color: #${Math.random().toString(16).substring(2, 8)};
      `;
      lzpa.appendChild(lz);
    }

    var mState = () => {
      lzpa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.paused ? vid.pause() : vid.play();
    };

    aud.onplaying = aud.onpause = () => mState();

    lzpa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-5-22 11:39

帖子代码：
<style>
    .pa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/3dp.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; border-radius: 6px; z-index: 1; position: relative; }
    #lzpa { position: absolute; left: calc(50% - 200px); top: 60px; width: 400px; height: 240px; cursor: pointer; }
    #lzpa:hover #vid { transform: scale(1.5, 1.2); }
    li-zi { position: absolute; width: 30px; height: 30px; border-radius: 0 100%; box-shadow: -1px -1px 6px rgba(255,255,255,.6); opacity: .8; offset-path: path('M0 120 A200 120 0 1 1 400 120 A200 120 0 1 1 0 120'); animation: move 20s linear infinite var(--state), size 20s linear infinite var(--state); }
    #vid { position: absolute; left: calc(50% - 80px); top: calc(50% - 80px); width: 160px; height: 160px; border-radius:50%; object-fit: cover; pointer-events: none; mix-blend-mode: color-dodge; transition: 2s; }
    @keyframes move { to { offset-distance: 100%; } }
    @keyframes size { 0%, 50%, 100% { transform: scale(1) rotateY(20deg); } 25% { transform: scale(0.5)rotateY(10deg); } 75% { transform: scale(1.5)rotateY(30deg); } }
</style>

<div class="pa">
    <div id="lzpa"><video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f6022657ac.mp4" autoplay loop muted></video></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=865040132" autoplay loop></audio>
</div>

<script>
    var total = 12;
    for(var i = 0; i < total; i ++) {
      let lz = document.createElement('li-zi');
      lz.style.cssText += `
            animation-delay: -${20 / total * i}s;
            background-color: #${Math.random().toString(16).substring(2, 8)};
      `;
      lzpa.appendChild(lz);
    }

    var mState = () => {
      lzpa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.paused ? vid.pause() : vid.play();
    };

    aud.onplaying = aud.onpause = () => mState();

    lzpa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

南无月 发表于 2024-5-22 12:56

这个路径没有用线串起来，之前用过的那些各种花样路径是不是都可以试着用一用了{:4_199:}

南无月 发表于 2024-5-22 12:59

这个球状体整了一条腰带，鼠标移上去之后，变大的同时还有变形。。

南无月 发表于 2024-5-22 13:04

本帖最后由 南无月 于 2024-5-22 13:11 编辑


这个粒子的变化是今天教程实例。。。。。{:4_199:}

梦江南 发表于 2024-5-22 15:14

老师又研究出了新东东，赞啦！

马黑黑 发表于 2024-5-22 17:32

梦江南 发表于 2024-5-22 15:14
老师又研究出了新东东，赞啦！

俺以为你是要给俺拉个赞助{:4_189:}

马黑黑 发表于 2024-5-22 17:32

南无月 发表于 2024-5-22 13:04
这个粒子的变化是今天教程实例。。。。。

是滴

马黑黑 发表于 2024-5-22 17:33

南无月 发表于 2024-5-22 12:59
这个球状体整了一条腰带，鼠标移上去之后，变大的同时还有变形。。

这是CSS特效

马黑黑 发表于 2024-5-22 17:33

南无月 发表于 2024-5-22 12:56
这个路径没有用线串起来，之前用过的那些各种花样路径是不是都可以试着用一用了

都可以尝试一下

南无月 发表于 2024-5-22 17:48

马黑黑 发表于 2024-5-22 17:33
都可以尝试一下

试了个杯子形状的，粒子个数没有设置，全部叠一起了。这个要有时间慢慢尝试，无限可能是真的。

南无月 发表于 2024-5-22 17:49

马黑黑 发表于 2024-5-22 17:33
这是CSS特效

宽高设置不同的数据它就可以变形了{:4_170:}那个印度美儿儿里用过。。当时试过用这个功能变瘦变高

南无月 发表于 2024-5-22 17:50

马黑黑 发表于 2024-5-22 17:32
是滴

{:4_199:}怪好看的，裁切的形状也好看

马黑黑 发表于 2024-5-22 17:57

南无月 发表于 2024-5-22 17:50
怪好看的，裁切的形状也好看

这个不是裁切，是设置边框的角半径

马黑黑 发表于 2024-5-22 17:57

南无月 发表于 2024-5-22 17:49
宽高设置不同的数据它就可以变形了那个印度美儿儿里用过。。当时试过用这个功能变瘦变高

反正多实践就会出新奇的效果

马黑黑 发表于 2024-5-22 18:01

南无月 发表于 2024-5-22 17:48
试了个杯子形状的，粒子个数没有设置，全部叠一起了。这个要有时间慢慢尝试，无限可能是真的。

{:4_190:}

樵歌 发表于 2024-5-22 18:26

不断创新！
问好神人{:4_190:}

马黑黑 发表于 2024-5-22 18:27

樵歌 发表于 2024-5-22 18:26
不断创新！
问好神人

{:4_191:}

樵歌 发表于 2024-5-22 18:33

马黑黑 发表于 2024-5-22 18:27


去赶了集，发现黑师代码都火遍江湖了{:4_173:}超级牛呵

马黑黑 发表于 2024-5-22 18:35

樵歌 发表于 2024-5-22 18:33
去赶了集，发现黑师代码都火遍江湖了超级牛呵

{:4_172:}

查看完整版本: 中了3d的毒