Plerng See Roong

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #mydiv {
   
3.         margin: 0 0 0 calc(50% - 631px);
   
4.         width: 1100px;
   
5.         position: relative;
   
6.         height: 734px;
   
7.         box-shadow: inset 0 0 60px lightblue, 3px 3px 12px gray;
   
8.         background: url('https://638183.freep.cn/638183/t24/jpg/01.jpg') no-repeat center/cover;
   
9.         overflow: hidden;
   
10.         z-index: 1;
    
11. }
    
12. #vid {
    
13.         position: absolute;
    
14.         width: 100%;
    
15.         height: calc(100% + 64px);
    
16.         bottom: -64px;
    
17.         object-fit: cover;
    
18.         opacity: .5;
    
19.         mix-blend-mode: screen;
    
20.         transform: rotateX(180deg);
    
21.         pointer-events: none;
    
22. }
    
23. #mypic {
    
24.         position: absolute;
    
25.         left: 10px;
    
26.         top: 10px;
    
27.         width: 200px;
    
28.         height: 200px;
    
29.         filter: opacity(.75) hue-rotate(60deg) invert(80%);
    
30.         transition: filter 1s;
    
31.         cursor: pointer;
    
32.         animation: rot 5s infinite linear var(--state);
    
33. }
    
34. #mypic:hover { filter: unset; }
    
35. @keyframes rot {
    
36.         to { transform: rotate(1turn); }
    
37. }
    
38. </style>
    
39. 
    
40. <div id="mydiv">
    
41.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1481218602" autoplay loop></audio>
    
42.         <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/20/5b51ff7192d45.mp4" loop></video>
    
43.         <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/001.png" alt="" />
    
44. </div>
    
45. 
    
46. <script>
    
47. (function() {
    
48.         let mState = () => {
    
49.                 aud.paused ? (mypic.style.setProperty('--state','paused'), vid.pause()) : (mypic.style.setProperty('--state','running'), vid.play());
    
50.         };
    
51.         aud.addEventListener('playing', mState, false);
    
52.         aud.addEventListener('pause', mState, false);
    
53.         mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
    
54. })();
    
55. </script>

复制代码

结构：（帖子元素）底图+视频背景+图片按钮

帖子元素使用的 inset 内阴影，是为了配合整体色彩效果，盒子四周有雾化凝结的感觉，用以烘托氛围。

视频绝对定位、上下倒转，尺寸在100%基础上高度+64px并下移64px，同时禁用鼠标事件。此外，object-fit: cover; 是视频铺满帖子的关键设置（但可能会对个别视频无效）；fix-blend-mode滤镜是为了去其背景，此时不必使用opacity属性令其透明。

图片按钮通过CSS系列滤镜营造奇特外观，令其主色系与帖子整体效果配套。它可以回归本我：鼠标滑过是，解除所有滤镜。

红影

这张底图好美，搭配的元素也都好漂亮

红影

transition: filter 1s;这个加得好，让解除滤镜的过程有个缓冲

红影

黑黑的帖子总是有很多知识点供人们学习

梦油

色彩斑斓、美不胜收。

马黑黑

红影 发表于 2024-1-16 09:19
transition: filter 1s;这个加得好，让解除滤镜的过程有个缓冲

transition给hover动画一个执行时间

马黑黑

红影 发表于 2024-1-16 09:16
这张底图好美，搭配的元素也都好漂亮

感谢认同

马黑黑

醉美水芙蓉 发表于 2024-1-16 11:29
老师这个特效漂亮！

谢谢

马黑黑

梦油 发表于 2024-1-16 11:15
色彩斑斓、美不胜收。

谢谢。中午好

马黑黑

红影 发表于 2024-1-16 09:20
黑黑的帖子总是有很多知识点供人们学习

知识点嘛，这些都介绍过的，关键是综合运用吧

樵歌

这花花妖艳魔幻。可远观

小辣椒

小辣椒看了代码又是一头雾水

马黑黑

小辣椒 发表于 2024-1-16 12:38
小辣椒看了代码又是一头雾水

这个好简单的

马黑黑

樵歌 发表于 2024-1-16 12:22
这花花妖艳魔幻。可远观

可近之把玩

梦油

马黑黑 发表于 2024-1-16 11:57
谢谢。中午好

不客气啊！

红影

马黑黑 发表于 2024-1-16 11:56
transition给hover动画一个执行时间

是的，有个执行时间看着就觉得柔。

红影

马黑黑 发表于 2024-1-16 11:57
感谢认同

这样的花儿特别惊艳呢。

红影

马黑黑 发表于 2024-1-16 11:58
知识点嘛，这些都介绍过的，关键是综合运用吧

是的，综合运用才是王道。