邵容 - 铃兰

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.     position: relative;
   
4.     margin: 0 0 0 calc(50% - 593px);
   
5.     width: 1024px;
   
6.     height: 640px;
   
7.     background: url('https://638183.freep.cn/638183/t24/webp/lklj.webp') no-repeat center/cover;
   
8.     box-shadow: rgba(0,0,0,.6) 4px 6px 12px;
   
9.     overflow: hidden;
   
10.     z-index: 1;
    
11. }
    
12. #mydiv::before {
    
13.     position: absolute;
    
14.     content: '';
    
15.     width: 100%;
    
16.     height: 100%;
    
17.     background: url('https://638183.freep.cn/638183/t24/webp/llg.webp') no-repeat center/cover;
    
18.     clip-path: circle(0%);
    
19.     transition: 4s;
    
20. }
    
21. #mydiv:hover::before {
    
22.     clip-path: circle(100%);
    
23. }
    
24. #player {
    
25.     position: absolute;
    
26.     left: 20px;
    
27.     top: 20px;
    
28.     width: 120px;
    
29.     height: 120px;
    
30.     cursor: pointer;
    
31.     opacity: .45;
    
32.     animation: rot 6s infinite linear var(--state);
    
33. }
    
34. #vid {
    
35.     position: absolute;
    
36.     top: -60px;
    
37.     width: 100%;
    
38.     height: calc(100% + 60px);
    
39.     object-fit: cover;
    
40.     mix-blend-mode: screen;
    
41. }
    
42. @keyframes rot { to { transform: rotate(360deg); } }
    
43. </style>
    
44. 
    
45. <div id="mydiv">
    
46.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=289325" autoplay loop></audio>
    
47.     <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bb9b3e6d93.mp4" loop></video>
    
48.     <img id="player" src="https://638183.freep.cn/638183/small/hxdo.png" alt="" title="播放/暂停" />
    
49. </div>
    
50. 
    
51. <script>
    
52. (function() {
    
53.     let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'),vid.pause()) : (mydiv.style.setProperty('--state', 'running'),vid.play());
    
54.     aud.addEventListener('playing', mState, false);
    
55.     aud.addEventListener('pause', mState, false);
    
56.     mydiv.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
    
57. })();
    
58. </script>

复制代码

小辣椒

黑黑这个效果漂亮，还可以圆中变个美女出来

小辣椒

现在小辣椒惨了，估计套用都不会了

小辣椒

先收藏，然后欣赏黑黑的精美制作

马黑黑

小辣椒 发表于 2024-1-21 13:52
黑黑这个效果漂亮，还可以圆中变个美女出来

想变就变

马黑黑

小辣椒 发表于 2024-1-21 13:52
现在小辣椒惨了，估计套用都不会了

为啥

马黑黑

小辣椒 发表于 2024-1-21 13:53
先收藏，然后欣赏黑黑的精美制作

这个简单的

马黑黑

醉美水芙蓉 发表于 2024-1-21 14:22
这个真美！谢谢老师分享！

马黑黑

醉美水芙蓉 发表于 2024-1-21 14:23
有点flash的感觉了！

不会吧

起个网名好难

                               
登录/注册后可看大图

以为美女会重复出现哪知仅出现几秒钟就再也没有了

梦油

黑黑先生出手不凡。

亦是金

起个网名好难 发表于 2024-1-21 16:02
以为美女会重复出现哪知仅出现几秒钟就再也没有了

将鼠标置于画面中，就能看美女管饱！

亦是金

好看的帖子，欣赏学习了，准备套用了！谢谢老师的代码!

马黑黑

亦是金 发表于 2024-1-21 17:16
好看的帖子，欣赏学习了，准备套用了！谢谢老师的代码!

马黑黑

亦是金 发表于 2024-1-21 17:12
将鼠标置于画面中，就能看美女管饱！

马黑黑

梦油 发表于 2024-1-21 16:52
黑黑先生出手不凡。

马黑黑

起个网名好难 发表于 2024-1-21 16:02
以为美女会重复出现哪知仅出现几秒钟就再也没有了

一睹芳容的一大约暗示了多乎哉不多也的意思