小辣椒 发表于 2024-1-4 13:25

喜欢你 TO：红影芳辰快乐！（学习黑黑老屋后山林效果）

<style>
#papa {
        margin: 150px 0 0 calc(50% - 801px);
        position: relative;
        width: 1440px;
        height: 842px;
        background: tan url('https://xlaj.cn/assets/file/zp/20240104131230.jpg');
        background-blend-mode: difference;
        border: 3px solid rgba(120,0,200,.6);
        border-radius: 12px;
        box-shadow: 3px 3px 20px #ccc;
        overflow: hidden;
        z-index: 1;
}
#btnplay {
        position: absolute;
        top: 480px;
        left: 600px;
        width:200px;
        filter: hue-rotate(220deg) drop-shadow(0 0 2px transparent);
        cursor: pointer;
        transition: filter .35s ease-in;
        z-index: 1;
        animation: rotating 5s infinite linear var(--state);
}
#btnplay:hover {
        filter: hue-rotate(0) drop-shadow(0 0 30px white);
}
#vid {
        position: absolute;
        top: -0px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: opacity(.98);
}
@keyframes rotating {
        to { transform: rotate(1turn); }
}

#tit {
      position: absolute;
      left: 250px;
      top: -20px;
      background-image:url('https://xlaj.cn/assets/file/zp/20240102011216.gif'); background-size:cover;
      width:850px; height:200px; font: bold 3.2em serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
         border:0px #eddfdc solid; z-index: 10;
}
#dt1{ position: absolute; width:518px; height:244px; top: 200px;left: 350px; }

</style>

<div id="papa">
        <video id="vid" src="https://lk999.oss-cn-guangzhou.aliyuncs.com/shuis.mp4" loop muted></video>
            
                <img id="dt1" src="https://xlaj.cn/assets/file/zp/20240104131301.png" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28949444" autoplay loop></audio>

<div id="tit">贺红影芳辰快乐</div>
        <img id="btnplay" src="https://xlaj.cn/assets/file/zp/20240104131146.png" alt="" title="播放/暂停" />
</div>

<script>

(function() {

let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

小辣椒 发表于 2024-1-4 13:26

亲爱的生日快乐！永远年轻漂亮，美美的{:4_170:}

小辣椒 发表于 2024-1-4 13:27

@马黑黑

黑黑套用一个屋后山林的源码制作{:4_205:}
谢谢黑黑源码分享

小辣椒 发表于 2024-1-4 13:28

@走过岁月 昨天看见岁月的水效果，今天玩一下，谢谢岁月

梦油 发表于 2024-1-4 13:37

很高兴和小辣椒朋友一起贺芳辰。祝愿影子朋友生日快乐、万事如意。

小辣椒 发表于 2024-1-4 13:42

梦油 发表于 2024-1-4 13:37
很高兴和小辣椒朋友一起贺芳辰。祝愿影子朋友生日快乐、万事如意。

谢谢梦油，我们一起贺红影生日快乐！

岁月·如歌 发表于 2024-1-4 14:04

前排入座，https://pic.imgdb.cn/item/5fddc7c33ffa7d37b383b033.gif红影生日快乐！

红影 发表于 2024-1-4 16:31

这个背景漂亮，亲爱的这么快就用上了岁月的水波纹效果啊。两条鱼儿的按钮还是变色的。
谢谢亲爱的，这个贺帖太美了{:4_179:}

红影 发表于 2024-1-4 16:33

水中还加了两个美人儿，这构思真有趣{:4_199:}

红影 发表于 2024-1-4 16:33

梦油 发表于 2024-1-4 13:37
很高兴和小辣椒朋友一起贺芳辰。祝愿影子朋友生日快乐、万事如意。

多谢梦油，大家一起快乐{:4_187:}

红影 发表于 2024-1-4 16:33

岁月·如歌 发表于 2024-1-4 14:04
前排入座，红影生日快乐！

多谢岁月如歌，大家一起快乐{:4_187:}

梦油 发表于 2024-1-4 16:41

红影 发表于 2024-1-4 16:33
多谢梦油，大家一起快乐

影子朋友别客气。

梦油 发表于 2024-1-4 16:42

小辣椒 发表于 2024-1-4 13:42
谢谢梦油，我们一起贺红影生日快乐！

好！我们一起祝福红影生日快乐。

马黑黑 发表于 2024-1-4 17:30

小辣椒 发表于 2024-1-4 13:27
@马黑黑

黑黑套用一个屋后山林的源码制作


发现没有：边框颜色的神秘。仔细瞅瞅能发现啥。

庶民 发表于 2024-1-4 17:30

借您的精彩，为红影祝福。

红影 发表于 2024-1-4 19:22

梦油 发表于 2024-1-4 16:41
影子朋友别客气。

嗯嗯，那就一起开心{:4_187:}

亦是金 发表于 2024-1-4 20:16

欣赏小辣椒精美生日贺帖，祝红影生日快乐！{:4_187:}

千羽 发表于 2024-1-4 20:48

这是一汪大温泉吗？很美的景色，两个美丽的小姐姐和两条戏水的漂亮金鱼……很理想的泡澡地儿{:4_187:}

千羽 发表于 2024-1-4 20:49

和小辣椒一起同祝红影芳辰快乐！{:4_187:}

千羽 发表于 2024-1-4 20:50

这音乐也挺好听的{:4_181:}
页: [1] 2
查看完整版本: 喜欢你 TO：红影芳辰快乐！（学习黑黑老屋后山林效果）