梦江南 发表于 2024-8-6 15:06

学习帖【卡通小猪】

本帖最后由 梦江南 于 2024-8-7 10:30 编辑 <br /><br /><style>
#mydiv {
        margin: 30px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 768px;
        background: url('https://pic.imgdb.cn/item/66b2dc3bd9c307b7e931d8bb.jpg') 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('http://tuku.link/imgs/2024/08/d0793789d67c443a.png') no-repeat center/cover;
        -webkit-mask: linear-gradient(to top right, red var(--pos), transparent calc(var(--pos) + 5%), transparent);
}
#player {
        position: absolute;
        left: calc(50% - 61px);
        top: -61px;
        cursor: pointer;
        transition: 1.2s;
        z-index: 2;
        animation: rot 6s 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(to top right, red 90%, transparent 91%, transparent 0);
        mix-blend-mode: screen;
}
@keyframes rot {
        to { transform: rotate(1turn); }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1340764398" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/15/5b5566a419452_10s_big.mp4" autoplay loop muted></video>
        <img id="player" alt="" title="播放/暂停" src="https://638183.freep.cn/638183/t23/btn/plum.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();
        }, 20);
};
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-6 15:46

https://5b0988e595225.cdn.sohucs.com/images/20171207/1d36116578e04c28aeaf8836c91b5790.gif

梦江南 发表于 2024-8-6 16:13

起个网名好难 发表于 2024-8-6 15:46


问好老师，谢谢沙发分享。天热多保重 ！{:4_204:}

朵拉 发表于 2024-8-6 16:53

好可爱的制作，欣赏学习哈{:4_204:}

梦江南 发表于 2024-8-6 17:05

朵拉 发表于 2024-8-6 16:53
好可爱的制作，欣赏学习哈

问好朵拉，谢谢支持，天热多保重 ！{:4_204:}

萍子爱写歌 发表于 2024-8-6 17:13

好可爱的小猪！！！

红影 发表于 2024-8-6 19:31

非常童趣可爱的制作，欣赏梦江南好帖{:4_199:}

红影 发表于 2024-8-6 19:33

右上角透出了底图的黑色边缘，如果底图换成是绿色边缘的，估计跟小猪视频就更匹配了{:4_173:}

红影 发表于 2024-8-6 19:34

梦江南每个作业都认真完成，太赞了{:4_199:}

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

萍子爱写歌 发表于 2024-8-6 17:13
好可爱的小猪！！！

谢谢萍子爱写歌欣赏支持，立秋快乐 ！{:4_204:}

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

红影 发表于 2024-8-6 19:31
非常童趣可爱的制作，欣赏梦江南好帖

谢谢影子支持鼓励，立秋快乐！{:4_204:}

梦江南 发表于 2024-8-7 10:17

红影 发表于 2024-8-6 19:33
右上角透出了底图的黑色边缘，如果底图换成是绿色边缘的，估计跟小猪视频就更匹配了

回影子，右上角透出了底图的黑色边缘是第一张底图，已扣图后换了近似小猪的颜色。不知道为什么会有这一角。

梦江南 发表于 2024-8-7 10:20

红影 发表于 2024-8-6 19:34
梦江南每个作业都认真完成，太赞了

影子总是说我作业很认真，认真做作业是应该的，只是水平有限做不好。{:4_204:}

红影 发表于 2024-8-7 20:23

梦江南 发表于 2024-8-7 10:13
谢谢影子支持鼓励，立秋快乐！

谢谢江南，也祝你立秋快乐{:4_187:}

红影 发表于 2024-8-7 20:24

梦江南 发表于 2024-8-7 10:17
回影子，右上角透出了底图的黑色边缘是第一张底图，已扣图后换了近似小猪的颜色。不知道为什么会有这一角 ...

看到江南换好了，很赞。这个角是去掉视频logo用的{:4_173:}

红影 发表于 2024-8-7 20:26

梦江南 发表于 2024-8-7 10:20
影子总是说我作业很认真，认真做作业是应该的，只是水平有限做不好。

没事啊，大家几乎都是从小白开始学的，学着学着就会得多点了呢。
黑黑专版里的那个小白帖子，江南也可以去学习一下，肯定会有收获的{:4_187:}

小文 发表于 2024-8-7 21:34

有趣！喜欢！

梦江南 发表于 2024-8-8 17:14

红影 发表于 2024-8-7 20:24
看到江南换好了，很赞。这个角是去掉视频logo用的

这个角是去掉视频logo用的，没有水印也要用这个吗？

梦江南 发表于 2024-8-8 17:16

红影 发表于 2024-8-7 20:26
没事啊，大家几乎都是从小白开始学的，学着学着就会得多点了呢。
黑黑专版里的那个小白帖子，江南也可以 ...

好的，我有空会到黑黑专版去学习的。只是看过就忘记了。{:4_201:}

梦江南 发表于 2024-8-8 17:17

小文 发表于 2024-8-7 21:34
有趣！喜欢！

问好小文，谢谢分享支持。问好！{:4_204:}
页: [1] 2
查看完整版本: 学习帖【卡通小猪】