马黑黑 发表于 2024-7-1 08:00

周子雷 -西亚风光

<style>

        #papa { --width: 1024px; margin: 120px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 683px; background: url('https://638183.freep.cn/638183/t24/3/xyfg.jpg') no-repeat center/cover; z-index: 1; overflow: hidden; box-shadow: 3px 3px 8px #666; position: relative; }

        #player { position: absolute; left: calc(50% - 50px); bottom: 100px; width: 100px; height: 100px; background: linear-gradient(green,lightgreen) repeat-y center/5% 5%, linear-gradient(to right,green,lightgreen) repeat-x center/5% 5%; border: thick double; border-color: green lightgreen; border-radius: 50%; cursor: pointer; animation: rot 6s linear infinite var(--state); }

        #player:hover { transform: scale(1.2); filter: drop-shadow(0 50px 0 green); }

#player::before, #player::after { position: absolute; content: ''; }

#player::before { inset: 0; background: inherit; transform: rotate(45deg); }

#player::after { inset: 40px; background: green; border-radius: 50%; }

        .vid { position: absolute; width: 100%; height: 50%; object-fit: cover; pointer-events: none; }

        .vid:nth-of-type(1) { bottom: 0; mix-blend-mode: screen; }

        .vid:nth-of-type(2) { height: 25%; top: 0; mix-blend-mode: multiply; }

        #papa:fullscreen .vid:nth-of-type(1) { height: 38%; }

        @keyframes rot { to { transform: rotate(360deg); } }

</style>



<div id="papa">

        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29378862" autoplay loop></audio>

        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/89/5f17a860d9235.mp4" autoplay loop muted></video>

        <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec49820da8aa.mp4" autoplay loop muted></video>

        <div id="player" titel="播放/暂停"></div>

</div>



<script>

var vids = papa.querySelectorAll('.vid');

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: '#papa',

        css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: green;',

});

var mState = () => {

        player.style.setProperty('--state',['running','paused'][+aud.paused]);

        player.title = ['暂停','播放'][+aud.paused];

        vids.forEach(vid => aud.paused ? vid.pause() : vid.play());

};

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

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

</script>

马黑黑 发表于 2024-7-1 08:01

本帖最后由 马黑黑 于 2024-7-1 08:06 编辑

帖子代码<style>
        #papa { --width: 1024px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 683px; background: url('https://638183.freep.cn/638183/t24/3/xyfg.jpg') no-repeat center/cover; z-index: 1; overflow: hidden; box-shadow: 3px 3px 8px #666; position: relative; }
        #player { position: absolute; left: calc(50% - 50px); bottom: 100px; width: 100px; height: 100px; background: linear-gradient(green,lightgreen) repeat-y center/5% 5%, linear-gradient(to right,green,lightgreen) repeat-x center/5% 5%; border: thick double; border-color: green lightgreen; border-radius: 50%; cursor: pointer; animation: rot 6s linear infinite var(--state); }
        #player:hover { transform: scale(1.2); filter: drop-shadow(0 50px 0 green); }
#player::before, #player::after { position: absolute; content: ''; }
#player::before { inset: 0; background: inherit; transform: rotate(45deg); }
#player::after { inset: 40px; background: green; border-radius: 50%; }
        .vid { position: absolute; width: 100%; height: 50%; object-fit: cover; pointer-events: none; }
        .vid:nth-of-type(1) { bottom: 0; mix-blend-mode: screen; }
        .vid:nth-of-type(2) { height: 25%; top: 0; mix-blend-mode: multiply; }
        #papa:fullscreen .vid:nth-of-type(1) { height: 38%; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29378862" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/89/5f17a860d9235.mp4" autoplay loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec49820da8aa.mp4" autoplay loop muted></video>
        <div id="player" titel="播放/暂停"></div>
</div>

<script>
var vids = papa.querySelectorAll('.vid');
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: '#papa',
        css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: green;',
});
var mState = () => {
        player.style.setProperty('--state',['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
        vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>本帖：播放器使用单元素+俩伪元素做成，其中，主元素设为双线边框、圆形。中心的绿色小圆是伪元素 ::after。其他内部图案有主元素和::before的渐变背景+伪元素::after旋转45度营造出来。

马黑黑 发表于 2024-7-1 08:09

两个视频背景，一上一下。下面的视频背景进入全屏时水波可能好会抬高到树林处，所以调整了其高度，代码在第 11 行。这个调整不知道在小屏设备表现如何，我只在1080高度的屏幕上观察过。

马黑黑 发表于 2024-7-1 08:14

播放器设备指针移动其上时的闲个屁，戳利用了 transform 的特性，大概是，元素已经有了其他转换动作，再给其增加新转换动作时，如果仅提供新的转换设置，则旧的转换会因为冲突不再执行（直至:hover 状态消失）。

梦江南 发表于 2024-7-1 08:58

水波和飞鸟都受转轮控制，看了真舒服！{:4_187:}

梦江南 发表于 2024-7-1 09:00

赞叹，老师的代码要胜过FLASH了！

红影 发表于 2024-7-1 09:02

马黑黑 发表于 2024-7-1 08:09
两个视频背景，一上一下。下面的视频背景进入全屏时水波可能好会抬高到树林处，所以调整了其高度，代码在第 ...

这个调整很到位，全屏了一下，水波的位置仍是十分到位。11行的这个高度是算出来的还是试出来的{:4_173:}

红影 发表于 2024-7-1 09:09

仔细地看了又看，把心思都放在了这播放器按钮的代码实现了，都忘了欣赏帖子的美{:4_173:}

红影 发表于 2024-7-1 09:23

马黑黑 发表于 2024-7-1 08:14
播放器设备指针移动其上时的闲个屁，戳利用了 transform 的特性，大概是，元素已经有了其他转换动作，再给 ...

是的，当鼠标触碰，按钮会变大并出现阴影，然后转动就停止了，直到鼠标移开。

红影 发表于 2024-7-1 09:37

里面交叉重复线性渐变，用5%的取值和边框的thick double很相配。{:4_199:}

有几个地方没看明白，为什么在线性渐变后用repeat-y和x会分别得到两条线，而且是居中的？用伪元素去旋转它为什么让着两条线出现预期的夹角？
我是真的不知道，或者学完忘了，这问题也许很小白，勿见笑{:4_173:}

南无月 发表于 2024-7-1 12:45

美丽的风光，这个转轮跟方向盘似的，保持平衡，
中间条纹还有动态，漂亮。。。。
鼠标触碰小播出现影子， 鼠标点击停止动态。。

南无月 发表于 2024-7-1 12:47

马黑黑 发表于 2024-7-1 08:09
两个视频背景，一上一下。下面的视频背景进入全屏时水波可能好会抬高到树林处，所以调整了其高度，代码在第 ...

井papa:fullscreen .vid:nth-of-type(1) { height: 38%; }这个视频给了个全屏高度变化。。
第一次看到，很新鲜
原来是这个作用。。非常细心的设计，观感极好。。
电脑全屏完美
我的手机不行，全屏没变化没试出来{:4_173:}

南无月 发表于 2024-7-1 12:48

小播够复杂的，难怪老师又写一个说明。。
代码绘画可以做到如此精细，
鬼斧神工。。。真的非常厉害。。

马黑黑 发表于 2024-7-1 15:14

南无月 发表于 2024-7-1 12:48
小播够复杂的，难怪老师又写一个说明。。
代码绘画可以做到如此精细，
鬼斧神工。。。真的非常厉害。。

实际上它，除了CSS相关代码偏多，并不复杂，它只是利用了两样东东：多重渐变背景、伪元素。

如果愿意，伪元素还可以不要，仅需要更多的渐变背景。

马黑黑 发表于 2024-7-1 15:15

南无月 发表于 2024-7-1 12:47
井papa:fullscreen .vid:nth-of-type(1) { height: 38%; }这个视频给了个全屏高度变化。。
第一次看到， ...
这是定义 id="papa" 元素下的第一个 class="vid" 的元素在全屏状态下它的高度

马黑黑 发表于 2024-7-1 15:27

红影 发表于 2024-7-1 09:23
是的，当鼠标触碰，按钮会变大并出现阴影，然后转动就停止了，直到鼠标移开。

额

马黑黑 发表于 2024-7-1 15:27

梦江南 发表于 2024-7-1 08:58
水波和飞鸟都受转轮控制，看了真舒服！

{:4_190:}

马黑黑 发表于 2024-7-1 15:28

梦江南 发表于 2024-7-1 09:00
赞叹，老师的代码要胜过FLASH了！

flash死亡了

flash的背后也是代码

马黑黑 发表于 2024-7-1 15:29

红影 发表于 2024-7-1 09:02
这个调整很到位，全屏了一下，水波的位置仍是十分到位。11行的这个高度是算出来的还是试出来的

估算，测试，调整

马黑黑 发表于 2024-7-1 15:32

红影 发表于 2024-7-1 09:09
仔细地看了又看，把心思都放在了这播放器按钮的代码实现了，都忘了欣赏帖子的美

这方式如果是去相亲那会失败。相亲，观其颜察其色，这要放在首位，你总不能先去研究人家衣服的饰物多么精致吧？
页: [1] 2 3 4 5 6
查看完整版本: 周子雷 -西亚风光