周子雷 -西亚风光

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #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; }
   
3.         #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); }
   
4.         #player:hover { transform: scale(1.2); filter: drop-shadow(0 50px 0 green); }
   
5. #player::before, #player::after { position: absolute; content: ''; }
   
6. #player::before { inset: 0; background: inherit; transform: rotate(45deg); }
   
7. #player::after { inset: 40px; background: green; border-radius: 50%; }
   
8.         .vid { position: absolute; width: 100%; height: 50%; object-fit: cover; pointer-events: none; }
   
9.         .vid:nth-of-type(1) { bottom: 0; mix-blend-mode: screen; }
   
10.         .vid:nth-of-type(2) { height: 25%; top: 0; mix-blend-mode: multiply; }
    
11.         #papa:fullscreen .vid:nth-of-type(1) { height: 38%; }
    
12.         @keyframes rot { to { transform: rotate(360deg); } }
    
13. </style>
    
14. 
    
15. <div id="papa">
    
16.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29378862" autoplay loop></audio>
    
17.         <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/89/5f17a860d9235.mp4" autoplay loop muted></video>
    
18.         <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec49820da8aa.mp4" autoplay loop muted></video>
    
19.         <div id="player" titel="播放/暂停"></div>
    
20. </div>
    
21. 
    
22. <script>
    
23. var vids = papa.querySelectorAll('.vid');
    
24. var sF = document.createElement('script');
    
25. sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
    
26. sF.charset = 'utf-8';
    
27. document.querySelector('body').appendChild(sF);
    
28. sF.onload = () => FS({
    
29.         papa: '#papa',
    
30.         css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: green;',
    
31. });
    
32. var mState = () => {
    
33.         player.style.setProperty('--state',['running','paused'][+aud.paused]);
    
34.         player.title = ['暂停','播放'][+aud.paused];
    
35.         vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
    
36. };
    
37. aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
    
38. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
39. </script>

复制代码

本帖：播放器使用单元素+俩伪元素做成，其中，主元素设为双线边框、圆形。中心的绿色小圆是伪元素 ::after。其他内部图案有主元素和::before的渐变背景+伪元素::after旋转45度营造出来。

马黑黑

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

马黑黑

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

梦江南

水波和飞鸟都受转轮控制，看了真舒服！

梦江南

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

红影

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

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

红影

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

红影

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

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

红影

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

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

南无月

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

南无月

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

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

南无月

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

马黑黑

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

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

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

马黑黑

南无月 发表于 2024-7-1 12:47
井papa:fullscreen .vid:nth-of-type(1) { height: 38%; }这个视频给了个全屏高度变化。。
第一次看到， ...

这是定义 id="papa" 元素下的第一个 class="vid" 的元素在全屏状态下它的高度

马黑黑

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

额

马黑黑

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

马黑黑

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

flash死亡了

flash的背后也是代码

马黑黑

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

估算，测试，调整

马黑黑

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

这方式如果是去相亲那会失败。相亲，观其颜察其色，这要放在首位，你总不能先去研究人家衣服的饰物多么精致吧？