侃大山 发表于 2023-12-19 11:17

马老师来收作业

本帖最后由 侃大山 于 2023-12-20 10:57 编辑 <br /><br /><style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: lightblue;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        position: relative;
        z-index: 1;
}
#mypic {
        position: absolute;
        width: 240px; left: 40%; top: 30%;
        cursor: pointer;
        animation: rot 6s infinite linear var(--state);
}
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .95;
        object-fit: cover;
        pointer-events: none;
}
li-zi {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
}
@keyframes moving {
        from { opacity: 0; transform: translate(0,0); }
        to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/16/01/V-160118-1ACC91B5.mp4" autoplay loop muted></video>
        <img id="mypic" src="https://pic.imgdb.cn/item/65810414c458853aeff5104d.png" alt="" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=245972" autoplay loop></audio>
</div>

<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
let all = 100;
for(let i = 0; i < all; i++) {
        let lz = document.createElement('li-zi');
        let hudu = Math.PI / 180 * 360 / all * i;
        let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
        lz.style.cssText += `
                --x0: ${xx}px;
                --y0: ${yy}px;
                left: calc(50% - 10px);
                top: calc(50% - 10px);
                background: #${Math.random().toString(16).substr(-6)};
                animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
        `;
        papa.insertBefore(lz,mypic);
}
</script>

侃大山 发表于 2023-12-19 11:19

粒子没出来，也移动不了，我按你的帖子加了margin: 0 0  0 calc(50% - 593px); 还是不过来{:5_106:}

侃大山 发表于 2023-12-19 11:20

谢谢马老师，帮忙看一下好么{:4_204:}

侃大山 发表于 2023-12-19 11:21

一会要有事了，先离开。辛苦马老师{:4_204:}

马黑黑 发表于 2023-12-19 11:43

本帖最后由 马黑黑 于 2023-12-19 12:03 编辑

侃大山 发表于 2023-12-19 11:19
粒子没出来，也移动不了，我按你的帖子加了margin: 0 00 calc(50% - 593px); 还是不过来{:5_10 ...
先看帖子位置。原始代码，margin这一句，你的大概是酱紫：

margin: 0 0 # 160; & # 160;0 calc(50% - 593px);
应该是下面这样子：

margin: 0 0 0 calc(50% - 593px);
粘贴的时候选择粘贴为纯文本就不会出现空格被解析为字符的现象！

再说粒子。从层级位置上讲，粒子要加在视频之后，否则被视频遮挡，视频很霸道的。JS代码里，这句，

papa.prepend(lz);

要改为：

papa.insertBefore(lz,mypic);

解释：这是放在图片的前面，这样，图片按钮、粒子、视频都是兄弟，但是它们有大小关系，从而这样叠加——

视频 -- 最底层
粒子 -- 中间
图片按钮 -- 最上层

醉美水芙蓉 发表于 2023-12-19 11:55

辫子哥哥 发表于 2023-12-19 12:04

大山兄弟出山了{:4_170:}

岁月·如歌 发表于 2023-12-19 12:20

敲敲小黑板，该交学费了{:5_117:}

世外桃源 发表于 2023-12-19 14:29

{:4_187:}欣赏佳作

世外桃源 发表于 2023-12-19 14:30

好看的画面{:4_187:}

世外桃源 发表于 2023-12-19 14:30

好制作，感谢分享{:4_187:}

世外桃源 发表于 2023-12-19 22:43

晚上再来欣赏{:4_199:}

红影 发表于 2023-12-20 08:53

真不错的作业{:4_187:}

侃大山 发表于 2023-12-20 10:58

马黑黑 发表于 2023-12-19 11:43
先看帖子位置。原始代码，margin这一句，你的大概是酱紫：




改好了，下回知道了黏贴时要用纯文本才行。谢谢{:4_204:}

侃大山 发表于 2023-12-20 10:59

马黑黑 发表于 2023-12-19 11:43
先看帖子位置。原始代码，margin这一句，你的大概是酱紫：




这个排序不懂，只是按照马师说的改过来了{:5_106:}

侃大山 发表于 2023-12-20 10:59

醉美水芙蓉 发表于 2023-12-19 11:55
学得不错呢？

谢谢{:4_204:}

侃大山 发表于 2023-12-20 11:01

辫子哥哥 发表于 2023-12-19 12:04
大山兄弟出山了

谢谢，学一下。

侃大山 发表于 2023-12-20 11:01

岁月·如歌 发表于 2023-12-19 12:20
敲敲小黑板，该交学费了

有道理，不知收费点在何处。

侃大山 发表于 2023-12-20 11:01

世外桃源 发表于 2023-12-19 14:29
欣赏佳作

谢谢鼓励{:4_204:}

侃大山 发表于 2023-12-20 11:02

红影 发表于 2023-12-20 08:53
真不错的作业

谢谢{:4_204:}
页: [1] 2
查看完整版本: 马老师来收作业