论坛 › 动画音画 › Plerng See Roong

马黑黑 发表于 2024-1-16 08:25

Plerng See Roong

<style>
#mydiv {
        margin: 0 0 0 calc(50% - 631px);
        width: 1100px;
        position: relative;
        height: 734px;
        box-shadow: inset 0 0 60px lightblue, 3px 3px 12px gray;
        background: url('https://638183.freep.cn/638183/t24/jpg/01.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
}
#vid {
        position: absolute;
        width: 100%;
        height: calc(100% + 64px);
        bottom: -64px;
        object-fit: cover;
        opacity: .5;
        mix-blend-mode: screen;
        transform: rotateX(180deg);
        pointer-events: none;
}
#mypic {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 200px;
        height: 200px;
        filter: opacity(.75) hue-rotate(60deg) invert(80%);
        transition: filter 1s;
        cursor: pointer;
        animation: rot 5s infinite linear var(--state);
}
#mypic:hover { filter: unset; }
@keyframes rot {
        to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1481218602" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/20/5b51ff7192d45.mp4" loop></video>
        <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/001.png" alt="" />
</div>

<script>
(function() {
        let mState = () => {
                aud.paused ? (mypic.style.setProperty('--state','paused'), vid.pause()) : (mypic.style.setProperty('--state','running'), vid.play());
        };
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-1-16 08:39

帖子代码
<style>
#mydiv {
        margin: 0 0 0 calc(50% - 631px);
        width: 1100px;
        position: relative;
        height: 734px;
        box-shadow: inset 0 0 60px lightblue, 3px 3px 12px gray;
        background: url('https://638183.freep.cn/638183/t24/jpg/01.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
}
#vid {
        position: absolute;
        width: 100%;
        height: calc(100% + 64px);
        bottom: -64px;
        object-fit: cover;
        opacity: .5;
        mix-blend-mode: screen;
        transform: rotateX(180deg);
        pointer-events: none;
}
#mypic {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 200px;
        height: 200px;
        filter: opacity(.75) hue-rotate(60deg) invert(80%);
        transition: filter 1s;
        cursor: pointer;
        animation: rot 5s infinite linear var(--state);
}
#mypic:hover { filter: unset; }
@keyframes rot {
        to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1481218602" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/20/5b51ff7192d45.mp4" loop></video>
        <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/001.png" alt="" />
</div>

<script>
(function() {
        let mState = () => {
                aud.paused ? (mypic.style.setProperty('--state','paused'), vid.pause()) : (mypic.style.setProperty('--state','running'), vid.play());
        };
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('pause', mState, false);
        mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>结构：（帖子元素）底图+视频背景+图片按钮

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

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

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

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

这张底图好美，搭配的元素也都好漂亮{:4_199:}

红影 发表于 2024-1-16 09:19

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

红影 发表于 2024-1-16 09:20

黑黑的帖子总是有很多知识点供人们学习{:4_199:}

梦油 发表于 2024-1-16 11:15

色彩斑斓、美不胜收。

醉美水芙蓉 发表于 2024-1-16 11:29

马黑黑 发表于 2024-1-16 11:56

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

transition给hover动画一个执行时间

马黑黑 发表于 2024-1-16 11:57

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

感谢认同

马黑黑 发表于 2024-1-16 11:57

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

谢谢

马黑黑 发表于 2024-1-16 11:57

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

谢谢。中午好

马黑黑 发表于 2024-1-16 11:58

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

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

樵歌 发表于 2024-1-16 12:22

这花花妖艳魔幻。可远观{:4_189:}

小辣椒 发表于 2024-1-16 12:38

小辣椒看了代码又是一头雾水{:4_203:}

马黑黑 发表于 2024-1-16 13:37

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

这个好简单的

马黑黑 发表于 2024-1-16 13:38

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

可近之把玩

梦油 发表于 2024-1-16 14:15

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

不客气啊！

红影 发表于 2024-1-16 14:38

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

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

红影 发表于 2024-1-16 14:40

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

这样的花儿特别惊艳呢。

红影 发表于 2024-1-16 14:40

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

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

查看完整版本: Plerng See Roong