凡尘

马黑黑

马黑黑

代码分享

1. <style>
   
2. #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; }
   
3. .wrap { position: absolute; bottom: 0; left: calc(50% - 200px); width: 360px; height: 360px; display: grid; place-items: center; }
   
4. .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; }
   
5. .wrap:hover::before { box-shadow: inset 0 0 60px rgba(240,10,50,.6); }
   
6. #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen; }
   
7. #player { position: absolute; width: 260px; height: 260px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
   
8. 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); }
   
9. @keyframes moving { from { transform: translate(var(--x0),var(--y0)); opacity: 0; } to { transform: translate(var(--x1),var(--y1)); opacity: .75; } }
   
10. @keyframes rotating { to { transform: rotate(360deg); } }
    
11. </style>
    
12. 
    
13. <div id="papa">
    
14.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1363152402" autoplay loop></audio>
    
15.         <div class="wrap">
    
16.                 <video id="vid" src="https://img.tukuppt.com/video_show/53950850/03/68/48/645b66b3d9dac.mp4" autoplay loop muted></video>
    
17.                 <div id="player" title="播放/暂停"></div>
    
18.         </div>
    
19. </div>
    
20. 
    
21. <script>
    
22. (function() {
    
23.         let r = player.offsetWidth / 2 - 8, total = 60;
    
24.         Array.from({length: total}).forEach((item,key) => {
    
25.                 let rad0 = (Math.PI / 180) * 360 / total * key,
    
26.                         rad1 = (Math.PI / 180) * (180 + (360 / total * key));
    
27.                 item = document.createElement('li-zi');
    
28.                 item.style.cssText += `
    
29.                         --x0: ${r + r * Math.cos(rad0)}px;
    
30.                         --y0: ${r + r * Math.sin(rad0)}px;
    
31.                         --x1: ${r + r * Math.cos(rad1)}px;
    
32.                         --y1: ${r + r * Math.sin(rad1)}px;
    
33.                         --duration: ${2 + Math.random() * 3}s;
    
34.                         --delay: -${Math.random() * 5}s;
    
35.                 `;
    
36.                 player.appendChild(item);
    
37.         });
    
38.         let mState = () => {
    
39.                 aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
    
40.         };
    
41.         aud.addEventListener('playing', mState, false);
    
42.         aud.addEventListener('pause', mState, false);
    
43.         player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
44. })();
    
45. </script>

复制代码

马黑黑

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
沙发，首席欣赏

马黑黑

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

大约

马黑黑

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

水晶球装文本呀？是不是太奢侈

樵歌

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

在冬季吗

樵歌

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

说的整个图图，特别对俺胃口

马黑黑

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

差不多吧

马黑黑

这是没问题的

樵歌

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

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

马黑黑

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

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

马黑黑

樵歌 发表于 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:04
你可能需要加一个div元素用来装文字，放在合适的地方就好。可以插入文字(红色部分）：

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

红影

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

红影

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

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

红影

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

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