红影 发表于 2024-8-10 11:19

《柔情似水》祝福大家七夕快乐！

<style>
#mydiv {
        margin: 80px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://pic.imgdb.cn/item/66b6b6c3d9c307b7e94298ca.gif') no-repeat center/cover;
        box-shadow: 0 0 6px rgba(0,0,0,.6);
        user-select: none;
        z-index: 1;
        position: relative;
        --pos: 0.1%;
}
#mydiv::after {
        position: absolute;
        content: '';
        inset: 0;
        background: url('https://pic.imgdb.cn/item/66b6b6c3d9c307b7e94298ca.gif') no-repeat center/cover;
        -webkit-mask: linear-gradient(to top left, red var(--pos), transparent calc(var(--pos) + 5%), transparent);
}
#player {
        position: absolute;
        left: 30px;
        top: 30px;
        cursor: pointer;
        transition: 1.2s;
        z-index: 2;
        opacity: .65;
        animation: rot 12s linear infinite var(--state);
}
#player:hover { filter: drop-shadow(0 0 50px fuchsia); }
#vid {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-mask: linear-gradient(140deg, red 89%, transparent 91%, transparent 0);
       
}
@keyframes rot {
        to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1993897803" autoplay loop></audio>
        <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ebe8fccf942eaf5d2a4390491d1c7102_preview.mp4" autoplay loop muted></video>
        <img id="player" alt="" title="播放/暂停" src="https://pic.imgdb.cn/item/66b6b5ddd9c307b7e94222d2.png" />
</div>

<script>
var zStep = 0.2, zVal = 0, zDo = false;
zMask = () => {
        zVal += zStep;
        if(zVal > 100 || zVal < -5) zStep = -zStep;
        setTimeout( () => {
                mydiv.style.setProperty('--pos', zVal + '%');
                if(zDo) zMask();
        }, 30);
};
mState = () => {
        mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = '点击' + ['暂停','播放'][+aud.paused];
        aud.paused ? vid.pause() : vid.play();
        zDo = aud.paused;
};
mydiv.onmouseover = (e) => {
        if(e.target.id.toLowerCase() !== 'mydiv' || aud.paused) return;
        zDo = true;
        zMask();
};
mydiv.onmouseout = () => zDo = false;
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-8-10 11:21

在这个美好的节日里，祝有情人皆成眷属，祝浪漫美好环绕在每个有情人的身边{:4_187:}

红影 发表于 2024-8-10 11:23

用了@马黑黑 T台人生代码效果，把视频遮罩用在右下角，便于无论动态遮罩是否运行，右下角的祝福语一直都在{:4_173:}视频遮罩若也使用 to left top ，留出的空挡不是想要的，就换成了角度控制。

红影 发表于 2024-8-10 11:24

这个像寓意人间情人和天上情人今日都会相聚一起，倾诉心中情义{:4_187:}

四海八荒 发表于 2024-8-10 11:34

同祝福

四海八荒 发表于 2024-8-10 11:37

牛郎织女一年见一次面，肯定没有时间争吵，都是恩爱缠绵。

四海八荒 发表于 2024-8-10 11:40

有一首歌叫；天下有情人

马黑黑 发表于 2024-8-10 11:57

六夕过完到七夕

梦江南 发表于 2024-8-10 13:15

动态的七夕相会更精彩。赞啦！{:4_187:}

小辣椒 发表于 2024-8-10 13:55

哇塞~~~好浪漫哦，亲爱的制作真棒！温馨的场景，许多人会喜欢的{:4_170:}

小辣椒 发表于 2024-8-10 13:58

四海八荒 发表于 2024-8-10 11:34
同祝福

和四海一起同祝福{:4_205:}

小辣椒 发表于 2024-8-10 13:59

祝福天下有情人终成眷属，幸福满满哦{:4_204:}{:4_204:}

梦油 发表于 2024-8-10 14:34

祝朋友们家庭幸福、生活快乐吗！

红影 发表于 2024-8-11 21:40

四海八荒 发表于 2024-8-10 11:37
牛郎织女一年见一次面，肯定没有时间争吵，都是恩爱缠绵。

很有道理，但能时时相见刻刻不厌不是更好么{:4_204:}

红影 发表于 2024-8-11 21:41

四海八荒 发表于 2024-8-10 11:40
有一首歌叫；天下有情人

这个节日应该是祝福天下有情人{:4_187:}

红影 发表于 2024-8-11 21:41

马黑黑 发表于 2024-8-10 11:57
六夕过完到七夕

有六夕么{:4_173:}

红影 发表于 2024-8-11 21:43

梦江南 发表于 2024-8-10 13:15
动态的七夕相会更精彩。赞啦！

那张伪元素上的图本来也是视频，相加几个字，就把它变成了动图{:4_173:}

马黑黑 发表于 2024-8-11 21:43

红影 发表于 2024-8-11 21:41
有六夕么

七夕之前是六夕，今天是八夕

红影 发表于 2024-8-11 21:44

小辣椒 发表于 2024-8-10 13:55
哇塞~~~好浪漫哦，亲爱的制作真棒！温馨的场景，许多人会喜欢的

做个贺帖，同时学习一下《T台人生》的代码{:4_173:}

红影 发表于 2024-8-11 21:45

梦油 发表于 2024-8-10 14:34
祝朋友们家庭幸福、生活快乐吗！

跟梦油一起祝福{:4_204:}
页: [1] 2
查看完整版本: 《柔情似水》祝福大家七夕快乐！