论坛 › 动画音画 › 【黑师代码】快乐时光（学习黑师20240627《程池 - 敦煌生命》弯曲伸缩小播效果）

南无月 发表于 2024-6-27 17:41

【黑师代码】快乐时光（学习黑师20240627《程池 - 敦煌生命》弯曲伸缩小播效果）

<style>
#tz {
        --width: 1700px;
        margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
        width: var(--width);
        height: 900px;
        background: url('https://642303.freep.cn/642303/tu/0627010.webp') no-repeat center/cover;
        box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
        overflow: hidden;
        position: relative;
}
#player {
        position: absolute;
        display: grid;
        place-items: center;
        left: 15%;
        top: 20%;
        width: var(--ww);
        height: var(--ww);
        background: url('https://642303.freep.cn/642303/za/295d9e3e1fa74256950bf6903fd727ec_tplv-obj_540_540.gif') no-repeat 50%/96%;
        border-radius: 100%;
        cursor: pointer;
        transition: .7s;
        filter: hue-rotate(230deg);
        mix-blend-mode: screen;
        opacity: .99;
        animation: rot 12s linear infinite var(--state);
        --ww: 600px;
        --size: 120px;
}
#player:hover { filter: hue-rotate(30deg); }
c-c {
        position: absolute;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        content: url('https://642303.freep.cn/642303/za/295d9e3e1fa74256950bf6903fd727ec_tplv-obj_540_540.gif') ;
        box-shadow: 0 0 6px rgba(0, 0, 0, .1);
        animation: flyout 6s forwards;
}

#vid {
        position: absolute;
        bottom: 0;
        right:330px;
        width: 100%;
        height: calc(100% + 60px);
        object-fit: cover;
        mix-blend-mode: screen;
        pointer-events: none;
        opacity: .08;
}
#tz:fullscreen #vid { height: calc(100% + 100px); }
@keyframes flyout {
        to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
        from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
        to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
}
@keyframes rot {
        to { transform: rotate(360deg); }
}
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1359338294" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/50/5b445b647f231.mp4" muted autoplay loop></video>
        <div id="player" title="暂停"></div>

</div>

<script>

var ccs = [];
new Array(total = 12).fill(0).map((c,k) => {
        c = document.createElement('c-c');
        c.style.cssText += `--deg: ${360 / total * k}deg`;
        player.appendChild(c);
        ccs.push(c);
});

var mState = () => {
        player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        player.title = ['暂停','播放'][+aud.paused];
        ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
        aud.paused ? vid.pause() : vid.play();
};

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

player.onclick = () => aud.paused ? aud.play() : aud.pause();

var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
        papa: '#tz',
        css: 'bottom: 20px; left: 95%; transform: translate(-50%); --color:snow; --fsBg:transparency;',
});
</script>

南无月 发表于 2024-6-27 17:42

@马黑黑 白老师瞧一眼跟的今天的作业{:4_173:}
就试了这一张图，就舍不得换下来了。
虽然看着很吵眼睛。。

南无月 发表于 2024-6-27 17:43

鼠标移到小播上，颜色会变化{:4_173:}

马黑黑 发表于 2024-6-27 18:02

南无月 发表于 2024-6-27 17:42
@马黑黑 白老师瞧一眼跟的今天的作业
就试了这一张图，就舍不得换下来了。
虽然看着很吵眼睛。 ...

这个设计厉害啦

南无月 发表于 2024-6-27 18:05

马黑黑 发表于 2024-6-27 18:02
这个设计厉害啦

你厉害。我怂的很。。不厉害 的{:4_170:}

红影 发表于 2024-6-27 18:07

月儿真是创意无限，把小球换成这样可爱的花朵了，视频配置也漂亮。
给月儿点赞{:4_199:}

马黑黑 发表于 2024-6-27 18:07

南无月 发表于 2024-6-27 18:05
你厉害。我怂的很。。不厉害 的

很不错的创意

南无月 发表于 2024-6-27 18:08

马黑黑 发表于 2024-6-27 18:02
这个设计厉害啦

no-repeat 50%/96%;
小播后面这个百分比，也是有玄机的。。
数字改大一些，里面的图片它才圆。不然原来是方的{:4_170:}

红影 发表于 2024-6-27 18:08

这立意也好，做一个快乐的人，让快乐如此热烈奔放地发散呢{:4_199:}

马黑黑 发表于 2024-6-27 18:10

南无月 发表于 2024-6-27 18:08
no-repeat 50%/96%;
小播后面这个百分比，也是有玄机的。。
数字改大一些，里面的图片它才圆。不然原来 ...

background: ... 位置/尺寸

位置那里，50%同等于center，居中；
尺寸指背景图片显示在背景上的尺寸

小辣椒 发表于 2024-6-27 20:32

来欣赏月月的精美制作{:4_171:}

小辣椒 发表于 2024-6-27 20:34

还没有看黑黑教程，先欣赏了，月月的效果特美，吸引眼球的，这花儿开的太奔放了，背景图图的衬托，意境也是美{:4_199:}

南无月 发表于 2024-6-27 20:48

红影 发表于 2024-6-27 18:07
月儿真是创意无限，把小球换成这样可爱的花朵了，视频配置也漂亮。
给月儿点赞

{:4_187:}总能收到影子的鼓励和支持，太好了

南无月 发表于 2024-6-27 20:49

马黑黑 发表于 2024-6-27 18:07
很不错的创意

好哒，老师夸了我就美滋滋的乐一个{:4_173:}

南无月 发表于 2024-6-27 20:50

红影 发表于 2024-6-27 18:08
这立意也好，做一个快乐的人，让快乐如此热烈奔放地发散呢

影子就是积极向上，热情奔放~~这些很容易就被你感知到了{:4_187:}

南无月 发表于 2024-6-27 20:51

马黑黑 发表于 2024-6-27 18:10
background: ... 位置/尺寸

位置那里，50%同等于center，居中；


没想到的第一个百分比是居中。。
当时把第二个百分比改大一些后，就得到了想要的效果，就没试第一个。。
现在看来真是误打误撞到了。。{:4_170:}
太好了，这个我得记下

南无月 发表于 2024-6-27 20:51

小辣椒 发表于 2024-6-27 20:32
来欣赏月月的精美制作

小辣椒来了，开心ING..{:4_199:}

南无月 发表于 2024-6-27 20:52

小辣椒 发表于 2024-6-27 20:34
还没有看黑黑教程，先欣赏了，月月的效果特美，吸引眼球的，这花儿开的太奔放了，背景图图的衬托，意境也是 ...

这原是个小播，我看转得实在漂亮就放大了。
{:4_170:}

马黑黑 发表于 2024-6-27 21:32

南无月 发表于 2024-6-27 20:51
没想到的第一个百分比是居中。。
当时把第二个百分比改大一些后，就得到了想要的效果，就没试第一个。。 ...
百分之五十也不居中，是左边缘居中；然后，基于帖子元素，按自己的50%反向移动，这才居中。但环境可能有水平偏移（原因之一是布局中的双列或多列，帖子所在的列并不居中、存在偏移）所以要考虑偏移系数。

马黑黑 发表于 2024-6-27 21:34

南无月 发表于 2024-6-27 20:49
好哒，老师夸了我就美滋滋的乐一个

{:4_191:}

查看完整版本: 【黑师代码】快乐时光（学习黑师20240627《程池 - 敦煌生命》弯曲伸缩小播效果）