论坛 › 动画音画 › 水

马黑黑 发表于 2024-9-6 07:48

水

<style>
#tz {
        margin: 30px 0 30px calc(50% - 721px);
        position: relative;
        width: 1280px;
        height: 700px;
        background: url('https://638183.freep.cn/638183/t24/4/water.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 10px #000;
        user-select: none;
        z-index: 1;
}
#player {
        left: 45%;
        top: 40px;
        width: 160px;
        height: 200px;
        display: grid;
        place-items: center;
        cursor: pointer;
        animation: rot linear 8s infinite var(--state);
        position: absolute;;
}
#player::after {
        position: absolute;
        content: '';
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: linear-gradient(orange,cyan);
}
#vid {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        opacity: .5;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(transparent 20%, red 25%, red 0);
}
.ellipse {
        --deg: 0deg;
        position: absolute;
        width: 50%;
        height: 20%;
        background: #ff003380;
        border: 2px solid cyan;
        border-radius: 0100%25% 50%;
        filter: drop-shadow(0 0 16px #fff);
        transform: rotate(var(--deg)) translateX(-40px);
}
@keyframes rot { to { transform: rotate(-1turn); filter: hue-rotate(360deg); } }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=460793376" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/12/29/13/53/31/video5feac45b722c5.mp4" autoplay loop muted></video>
        <div id="player" draggable="true" title="支持拖曳"></div>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
        papa: '#tz',
        css: 'left: 20px; bottom: 20px; --fsBg: transparent; --color: white;',
});
Array(total = 6).fill('').forEach((elm,idx) => {
        elm = document.createElement('span');
        elm.className = 'ellipse';
        elm.style.cssText += `
                --deg: ${360 / total * idx}deg;
                background: #${Math.random().toString(16).substring(2,8)}a0;
        `;
        player.appendChild(elm);
});
mState = () => {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
player.ondragend = (e) => {
        var rect = tz.getBoundingClientRect();
        var left = e.clientX - rect.left - 80, top = e.clientY - rect.top - 80;
        if(left < 0) left = 0;
        if(left > rect.width - 160) left = rect.width - 160;
        if(top < 0) top = 0;
        if(top > rect.height - 160) top = rect.height - 160;
        player.style.left = left + 'px';
        player.style.top = top + 'px';
};
tz.ondragover = (e) => e.preventDefault();
</script>

马黑黑 发表于 2024-9-6 07:49

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#tz {
        margin: 30px 0 30px calc(50% - 721px);
        position: relative;
        width: 1280px;
        height: 700px;
        background: url('https://638183.freep.cn/638183/t24/4/water.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 10px #000;
        user-select: none;
        z-index: 1;
}
#player {
        left: 45%;
        top: 40px;
        width: 160px;
        height: 200px;
        display: grid;
        place-items: center;
        cursor: pointer;
        animation: rot linear 8s infinite var(--state);
        position: absolute;;
}
#player::after {
        position: absolute;
        content: '';
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: linear-gradient(orange,cyan);
}
#vid {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        opacity: .5;
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(transparent 20%, red 25%, red 0);
}
.ellipse {
        --deg: 0deg;
        position: absolute;
        width: 50%;
        height: 20%;
        background: #ff003380;
        border: 2px solid cyan;
        border-radius: 0100%25% 50%;
        filter: drop-shadow(0 0 16px #fff);
        transform: rotate(var(--deg)) translateX(-40px);
}
@keyframes rot { to { transform: rotate(-1turn); filter: hue-rotate(360deg); } }
&lt;/style&gt;

&lt;div id="tz"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=460793376" autoplay loop&gt;&lt;/audio&gt;
        &lt;video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/12/29/13/53/31/video5feac45b722c5.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="player" draggable="true" title="支持拖曳"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () =&gt; FS({
        papa: '#tz',
        css: 'left: 20px; bottom: 20px; --fsBg: transparent; --color: white;',
});
Array(total = 6).fill('').forEach((elm,idx) =&gt; {
        elm = document.createElement('span');
        elm.className = 'ellipse';
        elm.style.cssText += `
                --deg: ${360 / total * idx}deg;
                background: #${Math.random().toString(16).substring(2,8)}a0;
        `;
        player.appendChild(elm);
});
mState = () =&gt; {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () =&gt; mState();
player.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
player.ondragend = (e) =&gt; {
        var rect = tz.getBoundingClientRect();
        var left = e.clientX - rect.left - 80, top = e.clientY - rect.top - 80;
        if(left &lt; 0) left = 0;
        if(left &gt; rect.width - 160) left = rect.width - 160;
        if(top &lt; 0) top = 0;
        if(top &gt; rect.height - 160) top = rect.height - 160;
        player.style.left = left + 'px';
        player.style.top = top + 'px';
};
tz.ondragover = (e) =&gt; e.preventDefault();
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-9-6 07:49

本帖，播放器支持简单拖曳

马黑黑 发表于 2024-9-6 07:52

如果不想要拖曳功能，将 js 代码中 drag 代码块删掉，82 ~ 94行；另，删除 id="player" 标签的 draggable 属性。

梦江南 发表于 2024-9-6 08:06

问好黑黑老师，这个播放器变转变换颜色，更加神秘了。

梦江南 发表于 2024-9-6 08:07

谢谢黑黑老师辛苦！{:4_180:}

世外桃源 发表于 2024-9-6 12:00

欣赏欣赏

世外桃源 发表于 2024-9-6 12:00

感谢分享

朵拉 发表于 2024-9-6 12:49

色彩缤纷，好看耶~~{:4_178:}

彩云归 发表于 2024-9-6 16:33

艳丽变化的色彩，随意拖曳的功能，赞！

马黑黑 发表于 2024-9-6 17:42

朵拉 发表于 2024-9-6 12:49
色彩缤纷，好看耶~~

{:4_190:}

马黑黑 发表于 2024-9-6 17:43

彩云归 发表于 2024-9-6 16:33
艳丽变化的色彩，随意拖曳的功能，赞！

{:4_190:}

马黑黑 发表于 2024-9-6 17:43

世外桃源 发表于 2024-9-6 12:00
欣赏欣赏

感谢支持

马黑黑 发表于 2024-9-6 17:43

马黑黑 发表于 2024-9-6 07:52
如果不想要拖曳功能，将 js 代码中 drag 代码块删掉，82 ~ 94行；另，删除 id="player" 标签的 draggable...

{:4_190:}

小辣椒 发表于 2024-9-6 19:52

这个播放器还是纯代码制作{:4_199:}

小辣椒 发表于 2024-9-6 19:54

五颜六色，还可以自己再画面中自由拖曳，黑黑的代码真的强大的

花飞飞 发表于 2024-9-6 19:56

马黑黑 发表于 2024-9-6 07:52
如果不想要拖曳功能，将 js 代码中 drag 代码块删掉，82 ~ 94行；另，删除 id="player" 标签的 draggable...

这个功能这么先进，咋能不要涅。。{:4_173:}

花飞飞 发表于 2024-9-6 19:57

马黑黑 发表于 2024-9-6 17:43


这杯咖啡是自助的{:4_173:}

花飞飞 发表于 2024-9-6 19:59

这小播跟精灵一样，
它不止中间色彩在流动，而是整个花朵都在边转边变幻。。
而且色彩没有厚重的感觉，而是轻盈的柔和的，
这技术简直是绝了。{:4_173:}

花飞飞 发表于 2024-9-6 19:59

这是先整一块160*200的画布，用border-radius: 0 100% 25% 50%;圆角出每一叶片的形状，再设置6片，并水平方向移动成花。。这个之前见过两次。。。
可是颜色会动态变化啊，这个之前从来没有见过的。。加上透明度，和若隐若现的光晕，晶莹剔透。。彩色冰片一般。。{:4_199:}
高级得很

查看完整版本: 水