冬天的雨 发表于 2024-1-2 11:19

美丽的神话 TO:红影芳辰快乐 (马老师老屋后山林学习帖)


<style>
#papa {
        margin: 150px 0 0 calc(50% - 792px);
        position: relative;
        width: 1422px;
        height: 800px;
        background: tan url('https://pic.imgdb.cn/item/6592d864c458853aef574b67.webp');
        background-blend-mode: difference;
        border: 3px solid rgba(0,0,200,.6);
        border-radius: 12px;
        box-shadow: 3px 3px 20px #ccc;
        overflow: hidden;
        z-index: 1;
}
#btnplay {
        position: absolute;
        top: 520px;
        left: 100px;
        width:150px;
        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: -60px;
        width: 1422px;
        height: 860px;
        object-fit: cover;
        filter: opacity(.98);
}


@keyframes rotating {
        to { transform: rotate(1turn); }
}

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


</style>

<div id="papa">
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0febdc4d9660edc6b4576c1c1dbc620c_preview.mp4" loop muted></video>
            


        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1942373010" autoplay loop></audio>

<div id="tit">美丽的神话 TO:红影芳辰快乐</div>


        <img id="btnplay" src="https://pic.imgdb.cn/item/6592f2f1c458853aefc1709e.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-2 11:20

@红影

美女生日快乐!永远18 美貌如花{:4_170:}

冬天的雨 发表于 2024-1-2 11:22

@马黑黑

马老师我图做不好,但下午要出去了,小辣椒说红影的生日帖,今天必须完成,就用了视频了{:4_170:}

冬天的雨 发表于 2024-1-2 11:23

@小辣椒
果然你给的彩色字体背景漂亮的,谢谢了

冬天的雨 发表于 2024-1-2 11:25

红影美女,这个因为是作业帖,我就发这里了,回来后有时间再送,祝美女越来越漂亮,人见人爱,花见花开
{:4_172:}

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

芳龄几何的谁谁要怎样激动{:4_170:}

亦是金 发表于 2024-1-2 12:23

红影18芳辰快乐!{:4_187:}

红影 发表于 2024-1-2 13:56

这个制作好漂亮,尤其那个彩色的会变色的按钮。多谢冬小雨的好礼,太开心了{:4_187:}

红影 发表于 2024-1-2 13:58

闪动字和背景视频也很漂亮。谢谢冬小雨的精美礼物,小生日被记着,很让人感动{:4_187:}

红影 发表于 2024-1-2 13:59

马黑黑 发表于 2024-1-2 11:58
芳龄几何的谁谁要怎样激动

我是不是应该到屋后上林里去放声高歌一下啊{:4_173:}

红影 发表于 2024-1-2 14:00

亦是金 发表于 2024-1-2 12:23
红影18芳辰快乐!

哈哈,我倒是想那么小,可惜不可能了。谢谢亦是金老师{:4_187:}

梦油 发表于 2024-1-2 16:36

冬天的雨 发表于 2024-1-2 11:20
@红影

美女生日快乐!永远18 美貌如花

借冬雨贺帖祝福影子朋友生日快乐、万事遂心!

醉美水芙蓉 发表于 2024-1-2 17:01

醉美水芙蓉 发表于 2024-1-2 17:02

樵歌 发表于 2024-1-2 19:12

小冬雨厉害了,一会就捣鼓出一个漂亮视频了!好像比小辣椒还快一点{:4_178:}

樵歌 发表于 2024-1-2 19:13

借小冬雨美帖同祝红影芳辰快乐。

马黑黑 发表于 2024-1-2 19:21

红影 发表于 2024-1-2 13:59
我是不是应该到屋后上林里去放声高歌一下啊

吼两声应该体验极佳

红影 发表于 2024-1-2 19:34

梦油 发表于 2024-1-2 16:36
借冬雨贺帖祝福影子朋友生日快乐、万事遂心!

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

红影 发表于 2024-1-2 19:34

醉美水芙蓉 发表于 2024-1-2 17:01
到马老师家高歌一曲!

我唱歌不行,怕吓到人{:4_189:}

红影 发表于 2024-1-2 19:35

醉美水芙蓉 发表于 2024-1-2 17:02
欣赏冬雨老师精彩贺帖!祝红影美女生日快乐!

多谢水芙蓉美女,我们一起快乐{:4_187:}
页: [1] 2 3
查看完整版本: 美丽的神话 TO:红影芳辰快乐 (马老师老屋后山林学习帖)