论坛 › 欢乐水吧 › 美人吟 TO：红影 （学习黑黑美人思|思美人效果）

小辣椒 发表于 2023-2-26 21:28

美人吟 TO：红影 （学习黑黑美人思|思美人效果）

<style>
#papa {
        margin: 80px 0 0 calc(50% - 593px);
        width: 1040px;
        height: 680px;
        background: lightblue url('https://7e.g74.net/uploads/xx/za/34.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        user-select: none;
        z-index: 1;
        --state: paused;
        --opa: 1;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
        width: 50%;
        height: 100%;
        background: url('https://7e.g74.net/uploads/xx/za/4.jpg') no-repeat center/cover;
        opacity: var(--opa);
        transition: opacity 1.2s;
}
#papa::after { left: 50%; transform: rotateY(180deg); }
#papa:hover { --opa: 0; }
#papa:fullscreen { animation: flash 8s linear infinite alternate; }
#fly {
        position: absolute;
        left: 50%;
        width: 360px;
        height: 200px;
        animation: fly 100s infinite alternate var(--state);
}
.mplayer {
        --tt: 6s;
        position: absolute;
        left: 0;
                top:150px;
        width: 100px;
        height: 109px;
        border-radius: 50%;
        transform: perspective(1000px) rotateX(45deg) rotateY(30deg);
        animation: rot var(--tt) linear infinite var(--state);
        cursor: pointer;
        transition: .45s;
        z-index: 2;
}
.mplayer:hover { filter: drop-shadow(0 0 80px snow) brightness(200%); }
.mplayer:nth-of-type(2) {
        --tt: 4s;
        left: 210px;
                top:150px;
        width: 88px;
        height: 96px;
}
.mplayer:nth-of-type(3) {
        --tt: 2s;
        left: 130px;
               top:150px;
        width: 66px;
        height: 82px;
}
@keyframes rot { to { transform: perspective(1000px) rotateX(45deg) rotateY(30deg) rotateZ(360deg); } }
@keyframes fly { to { left: calc(100% - 360px); } }
@keyframes flash { from { --opa: 1; } to { --opa: 0; } }
#dt2{ position: absolute; width: 80px; height: 80px; top: 250px; left: 44%; }
#dt3{ position: absolute; width: 547px; height: 339px; top: 50px; left: 46px;}

</style>

<div id="papa">
<img id="dt2" src="https://pan.365.tf/uploads/lxx/20221025/hd.gif" alt="" />
<img id="dt3" src="https://wj.zp68.com/lxx/yunhua/2022/12/05/fye.gif" alt="" />
        <div id="fly">
                <img class="mplayer" src="https://pan.365.tf/uploads/lxx/20221025/mf.gif" alt="" />
                <img class="mplayer" src="https://pan.365.tf/uploads/lxx/20221025/mf.gif" alt="" />
                <img class="mplayer" src="https://pan.365.tf/uploads/lxx/20221025/mf.gif" alt="" />
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1437020541.mp3" loop autoplay></audio>

<script>
(function() {
        (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        let btns = document.querySelectorAll('.mplayer');
        [...btns].forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        FS({
                pa:papa,
                set:'right: 46.5%; bottom: 50px; background: transparent; color: snow; border: 2px solid snow;',
        });
        aud.onerror = () => {
                if(aud.error.code === 4) aud.src = 'https://music.163.com/song/media/outer/url?id=261721.mp3';
        }
})();
</script>

小辣椒 发表于 2023-2-26 21:28

@红影
亲爱的，套用一个作业，做的不好，别嫌弃{:4_170:}

小辣椒 发表于 2023-2-26 21:29

谢谢黑黑套用一个@马黑黑

起个网名好难 发表于 2023-2-26 21:43

原来要“走进去”才可以见到美女{:5_106:}

起个网名好难 发表于 2023-2-26 21:46

作词 : 尤小刚\n 作曲 : 张宏光\n～X～\n蓝蓝的白云天 悠悠水边柳\n玉手扬鞭马儿走 月上柳梢头\n红红的美人脸 淡淡柳眉愁\n飞针走线荷包绣 相思在心头\n风儿清 水长流 哥哥天边走\n自古美女爱英雄 一诺千金到尽头\n风声紧 雷声吼 妹妹苦争斗\n自古红颜多薄命 玉碎瓦全登西楼\n～X～\n蓝蓝的白云天 悠悠水边柳\n玉手扬鞭马儿走 月上柳梢头\n红红的美人脸 淡淡柳眉愁\n飞针走线荷包绣 相思在心头\n风儿清 水长流 哥哥天边走\n自古美女爱英雄 一诺千金到尽头\n风声紧 雷声吼 妹妹苦争斗\n自古红颜多薄命 玉碎瓦全登西楼\n自古红颜多薄命 玉碎瓦全登西楼\n～X～\n

小辣椒 发表于 2023-2-26 21:50

起个网名好难 发表于 2023-2-26 21:46
作词 : 尤小刚\n 作曲 : 张宏光\n～X～\n蓝蓝的白云天 悠悠水 ...

啊~~~谢谢{:4_187:}

我这个歌词没有加的，以后加{:4_189:}

小辣椒 发表于 2023-2-26 21:50

起个网名好难 发表于 2023-2-26 21:43
原来要“走进去”才可以见到美女

躲里面了{:4_170:}

醉美水芙蓉 发表于 2023-2-26 21:51

马黑黑 发表于 2023-2-26 21:51

弱弱问一声：小蜜蜂晕不晕，要不要找律师{:4_170:}

小辣椒 发表于 2023-2-26 21:53

醉美水芙蓉 发表于 2023-2-26 21:51
欣赏辣椒精美作品！

谢谢水芙蓉欣赏{:4_171:}

小辣椒 发表于 2023-2-26 21:53

马黑黑 发表于 2023-2-26 21:51
弱弱问一声：小蜜蜂晕不晕，要不要找律师

晕了才会采蜂蜜{:4_170:}

马黑黑 发表于 2023-2-26 21:56

小辣椒 发表于 2023-2-26 21:53
晕了才会采蜂蜜
采的是花蜜，小蜜蜂没晕你先晕{:5_106:}

小辣椒 发表于 2023-2-26 21:56

马黑黑 发表于 2023-2-26 21:56
采的是花蜜，小蜜蜂没晕你先晕

是让红影晕{:4_170:}

马黑黑 发表于 2023-2-26 21:57

小辣椒 发表于 2023-2-26 21:56
是让红影晕

红影晕了肯定去找律师

红影 发表于 2023-2-26 22:04

谢谢亲爱的，这个制作好漂亮。小蜜蜂还真转得有点晕呢{:4_173:}{:4_179:}

小辣椒 发表于 2023-2-26 22:05

马黑黑 发表于 2023-2-26 21:57
红影晕了肯定去找律师

好吧，你支助她，请个名律师{:4_170:}

小辣椒 发表于 2023-2-26 22:05

马黑黑 发表于 2023-2-26 21:57
红影晕了肯定去找律师

黑黑时间到了，我下了，晚安~

小辣椒 发表于 2023-2-26 22:07

红影 发表于 2023-2-26 22:04
谢谢亲爱的，这个制作好漂亮。小蜜蜂还真转得有点晕呢

啊~~~亲爱的你上来了啊，我刚准备下，晕就请名律师，钱黑黑赞助{:4_170:}

马黑黑 发表于 2023-2-26 22:19

小辣椒 发表于 2023-2-26 22:05
黑黑时间到了，我下了，晚安~

88

马黑黑 发表于 2023-2-26 22:19

小辣椒 发表于 2023-2-26 22:05
好吧，你支助她，请个名律师

说好了找免费的

查看完整版本: 美人吟 TO：红影 （学习黑黑美人思|思美人效果）