马黑黑 发表于 2024-1-25 18:01

凡尘

本帖最后由 马黑黑 于 2024-1-26 19:07 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 546px); width: 930px; height: 619px; border-radius: 6px; background: #ccc url('https://638183.freep.cn/638183/t24/webp/fjif.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
.wrap { position: absolute; bottom: 0; left: calc(50% - 200px); width: 360px; height: 360px; display: grid; place-items: center; }
.wrap::before { position: absolute; content: ''; width: 75%; height: 75%; border-radius: 50%; box-shadow: inset 0 0 60px rgba(50,10,200,.4); transition: .8s; }
.wrap:hover::before { box-shadow: inset 0 0 60px rgba(240,10,50,.6); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen; }
#player { position: absolute; width: 260px; height: 260px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
li-zi { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #eee; opacity: 0; animation: moving var(--duration) var(--delay) linear infinite alternate var(--state); }
@keyframes moving { from { transform: translate(var(--x0),var(--y0)); opacity: 0; } to { transform: translate(var(--x1),var(--y1)); opacity: .75; } }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=477831142" autoplay loop></audio>
        <div class="wrap">
                <video id="vid" src="https://img.tukuppt.com/video_show/53950850/03/68/48/645b66b3d9dac.mp4" autoplay loop muted></video>
                <div id="player" title="播放/暂停"></div>
        </div>
</div>

<script>
(function() {
        let r = player.offsetWidth / 2 - 8, total = 60;
        Array.from({length: total}).forEach((item,key) => {
                let rad0 = (Math.PI / 180) * 360 / total * key,
                        rad1 = (Math.PI / 180) * (180 + (360 / total * key));
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --x0: ${r + r * Math.cos(rad0)}px;
                        --y0: ${r + r * Math.sin(rad0)}px;
                        --x1: ${r + r * Math.cos(rad1)}px;
                        --y1: ${r + r * Math.sin(rad1)}px;
                        --duration: ${2 + Math.random() * 3}s;
                        --delay: -${Math.random() * 5}s;
                `;
                player.appendChild(item);
        });
        let mState = () => {
                aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
        };
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-1-25 18:03

代码分享
<style>
#papa { margin: 0 0 0 calc(50% - 546px); width: 930px; height: 619px; border-radius: 6px; background: #ccc url('https://638183.freep.cn/638183/t24/webp/fjif.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
.wrap { position: absolute; bottom: 0; left: calc(50% - 200px); width: 360px; height: 360px; display: grid; place-items: center; }
.wrap::before { position: absolute; content: ''; width: 75%; height: 75%; border-radius: 50%; box-shadow: inset 0 0 60px rgba(50,10,200,.4); transition: .8s; }
.wrap:hover::before { box-shadow: inset 0 0 60px rgba(240,10,50,.6); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen; }
#player { position: absolute; width: 260px; height: 260px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
li-zi { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #eee; opacity: 0; animation: moving var(--duration) var(--delay) linear infinite alternate var(--state); }
@keyframes moving { from { transform: translate(var(--x0),var(--y0)); opacity: 0; } to { transform: translate(var(--x1),var(--y1)); opacity: .75; } }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1363152402" autoplay loop></audio>
        <div class="wrap">
                <video id="vid" src="https://img.tukuppt.com/video_show/53950850/03/68/48/645b66b3d9dac.mp4" autoplay loop muted></video>
                <div id="player" title="播放/暂停"></div>
        </div>
</div>

<script>
(function() {
        let r = player.offsetWidth / 2 - 8, total = 60;
        Array.from({length: total}).forEach((item,key) => {
                let rad0 = (Math.PI / 180) * 360 / total * key,
                        rad1 = (Math.PI / 180) * (180 + (360 / total * key));
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --x0: ${r + r * Math.cos(rad0)}px;
                        --y0: ${r + r * Math.sin(rad0)}px;
                        --x1: ${r + r * Math.cos(rad1)}px;
                        --y1: ${r + r * Math.sin(rad1)}px;
                        --duration: ${2 + Math.random() * 3}s;
                        --delay: -${Math.random() * 5}s;
                `;
                player.appendChild(item);
        });
        let mState = () => {
                aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
        };
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-1-25 18:14

本帖最后由 马黑黑 于 2024-1-25 18:16 编辑

CSS新知识点：在视频样式代码中——


[*]#vid {
[*]      position: absolute;
[*]      width: 100%;
[*]      height: 100%;
[*]      object-fit: cover;
[*]      aspect-ratio: 1;
[*]      pointer-events: none;
[*]      mix-blend-mode: screen;
[*]}


——第5、6行配套，令视频按正方形呈现（父元素是正方形），其中，aspec-ratio 是较新的媒体属性，用于测试视口宽高比，例中值为 1 表示 1:1 即宽高相同，如果需要16:9，则写为 16 / 9 便可。至于 object-fit 已经多次使用，它是元素适应视口的方式，cover 表示内容在保持其宽高比的同时填充元素的整个内容框（如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框），值还有 fill、contain、scale-down、none 等。

朵拉 发表于 2024-1-25 19:15

沙发，首席欣赏{:4_190:}

樵歌 发表于 2024-1-25 20:30

创意无限呵！水晶球是她的前世吧{:4_178:}

樵歌 发表于 2024-1-25 20:33

可以搬到文本框上面，下面写字吗？{:4_203:}

马黑黑 发表于 2024-1-25 20:35

朵拉 发表于 2024-1-25 19:15
沙发，首席欣赏

{:4_190:}

马黑黑 发表于 2024-1-25 20:35

樵歌 发表于 2024-1-25 20:30
创意无限呵！水晶球是她的前世吧

大约

马黑黑 发表于 2024-1-25 20:36

樵歌 发表于 2024-1-25 20:33
可以搬到文本框上面，下面写字吗？

水晶球装文本呀？是不是太奢侈{:4_170:}

樵歌 发表于 2024-1-25 20:42

马黑黑 发表于 2024-1-25 20:35
大约

在冬季吗{:4_189:}

樵歌 发表于 2024-1-25 20:42

马黑黑 发表于 2024-1-25 20:36
水晶球装文本呀？是不是太奢侈

说的整个图图，特别对俺胃口{:4_189:}

马黑黑 发表于 2024-1-25 20:49

樵歌 发表于 2024-1-25 20:42
在冬季吗

差不多吧

马黑黑 发表于 2024-1-25 20:51

本帖最后由 马黑黑 于 2024-1-25 20:57 编辑 <br /><br />这是没问题的

樵歌 发表于 2024-1-25 20:57

马黑黑 发表于 2024-1-25 20:49
差不多吧

楼下回复不了。这里请教：把代码复制后，只换文字是吧？另外，那最下面的水晶球管不管呢？

马黑黑 发表于 2024-1-25 20:57

樵歌 发表于 2024-1-25 20:42
说的整个图图，特别对俺胃口

这个没啥问题，你叫影子帮你设计一下

马黑黑 发表于 2024-1-25 21:04

樵歌 发表于 2024-1-25 20:57
楼下回复不了。这里请教：把代码复制后，只换文字是吧？另外，那最下面的水晶球管不管呢？
你可能需要加一个div元素用来装文字，放在合适的地方就好。可以插入文字(红色部分）：

<div id="papa">
    <!-- 原来的代码 -->
    <div id="wenzi">
      <p>行1<br>行2<br>行N</p>
    </div>
</div>

然后看效果，这时你会发现文字不在自己希望的地方，你要在CSS里加入（红色部分）：

<style>
/*原来的代码 */
#wenzi {
    position: absolute;
    left: 60px; /* 左边起始 */
    top: 40px; /* 上边起始 */
    font-size: 20px; /* 文字大小 */
}
</style>

修改相应值，知道满意为止。

樵歌 发表于 2024-1-25 21:10

马黑黑 发表于 2024-1-25 21:04
你可能需要加一个div元素用来装文字，放在合适的地方就好。可以插入文字(红色部分）：




好的，谢谢，先复制下来，明天再捣鼓捣鼓看，实在不行再请教{:4_190:}

红影 发表于 2024-1-25 21:47

还以为这个水晶球是代码，原来是视频啊。不过也有代码的加持，还有鼠标触动的效果呢。
黑黑真是创意无限{:4_199:}

红影 发表于 2024-1-25 21:50

马黑黑 发表于 2024-1-25 18:14
CSS新知识点：在视频样式代码中——




又学到了一招，这个比计算宽高再裁剪要方便多了呢{:4_199:}

红影 发表于 2024-1-25 22:07

马黑黑 发表于 2024-1-25 18:03
代码分享

这个用wrap套了player还真没怎么看懂，player的尺寸少了100，视频在wrap中，可看小球已经碰到水晶球的边缘了啊。小球走过的直径是用了player的。哦，视频的球原本是有外边缘的，虽然1:1放入的，边缘还在，这个少100就是根据这个来的吧？不知道理解得对不对。
页: [1] 2 3 4 5 6 7 8
查看完整版本: 凡尘