梦江南 发表于 2024-11-19 15:25

美丽的姑娘（学习黑黑老师的 Breath and Life代码）

本帖最后由 梦江南 于 2024-11-20 09:07 编辑 <br /><br /><style>
#mydiv {
    margin: 30px 0 30px calc(50% - 593px);
    width: 1024px;
    height: 640px;
    background: url('https://pic.imgdb.cn/item/673c39e0d29ded1a8c95e773.png') no-repeat center/cover;
    box-shadow: 4px 4px 8px gray;
    z-index: 1;
    position: relative;
    --state: running;
}

#msvg {
    position: absolute;
    left: 30%;
    bottom:40%;
    cursor: pointer;
    filter: drop-shadow(-5px -5px 10px silver);
    animation: rot 8s linear infinite var(--state);
    width:200px;height:200px;
}

#msvg:hover {
    filter: grayscale(1);
}

#vid {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask: radial-gradient(transparent 20%, red);
    pointer-events: none;
    mix-blend-mode:screen
}

#fsbtn {
    position: absolute;
    left: 150px;
    bottom: 15px;
    color: white;
    padding: 2px 6px;
    border: 2px solid snow;
    border-radius: 8px;
    user-select: none;
    cursor: pointer;
    transition: .5s;
}

@keyframes rot {
    to {
      transform: rotate(360deg);
    }
}
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35407348" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/07/03/10/53/43/video64a238371fe73.mp4" autoplay loop muted></video>
<svg id="msvg" viewbox="0 0 250 250">
    <mask id="m1">
      <circle cx="125" cy="125" r="125" fill="black">
      <animate attributeName="fill" values="black;white;black" dur=".5s" repeatCount="indefinite" />
      </circle>
    </mask>
    <image href="https://pic.imgdb.cn/item/673c36bcd29ded1a8c92bb5e.png" x="0" y="0" width="250" height="250" mask="url(#m1)" />
</svg>
<span id="fsbtn"></span>
<img style="width:300px;height:300px;position:absolute; right: 15%; bottom: 1%;" src="https://pic.imgdb.cn/item/673c3ba4d29ded1a8c97684b.webp" />
</div>
<script>
{
let fs = (paId, btnId) => {
      const pa = document.getElementById(paId), btn = document.getElementById(btnId);
      if(!pa || !btn) return false;
      let fsTimer, isFScreen = false;
      btn.innerText = '进入全屏';
      btn.style.opacity = '0';
      btn.onclick = () => isFScreen ? document.exitFullscreen() : pa.requestFullscreen();

      pa.addEventListener('mousemove', () => {
                clearTimeout(fsTimer);
                btn.style.opacity = '1';
                fsTimer = setTimeout(() => {
                        btn.style.opacity = '0';
                }, 3000);
      });

      document.addEventListener('fullscreenchange', () => {
                if (document.fullscreenElement !== null) {
                        isFScreen = true;
                        btn.innerText = '退出全屏';
                } else {
                        isFScreen = false;
                        btn.innerText = '进入全屏';
                }
      });
};
msvg.onclick = () => {
    aud.paused ? (aud.play(), vid.play(), msvg.style.setProperty('--state', 'running')) : (aud.pause(), vid.pause(), msvg.style.setProperty('--state', 'paused'));
};
fs('mydiv', 'fsbtn');
aud.play().catch(_ => mState());
}
</script>

夕阳黄昏 发表于 2024-11-19 16:11

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦油 发表于 2024-11-19 17:01

欣赏佳作，问候梦江南。

梦江南 发表于 2024-11-19 17:09

夕阳黄昏 发表于 2024-11-19 16:11


谢谢老师支持，傍晚好。{:4_204:}

梦江南 发表于 2024-11-19 17:10

梦油 发表于 2024-11-19 17:01
欣赏佳作，问候梦江南。

谢谢梦油老师支持，傍晚好！{:4_204:}

夕阳黄昏 发表于 2024-11-19 17:46

梦江南 发表于 2024-11-19 17:09
谢谢老师支持，傍晚好。

拉马头琴的人也用百分比来定位，否则一全屏就不好看了。

红影 发表于 2024-11-19 20:56

这个制作漂亮，用黑黑的最新代码，表达了对姑娘的思念。
欣赏江南好帖{:4_199:}

红影 发表于 2024-11-19 20:57

江南又是最快完成作业的呢，很赞{:4_199:}

樵歌 发表于 2024-11-19 21:05

歌动听，画面好美！

梦江南 发表于 2024-11-20 08:05

夕阳黄昏 发表于 2024-11-19 17:46
拉马头琴的人也用百分比来定位，否则一全屏就不好看了。

老师早上好，回老师，我是用的%，不是%全屏看人还要往上呢。老师请施教！{:4_187:}

梦江南 发表于 2024-11-20 08:06

红影 发表于 2024-11-19 20:56
这个制作漂亮，用黑黑的最新代码，表达了对姑娘的思念。
欣赏江南好帖

影子早上好，我只会套，还套不好呢。{:4_204:}

梦江南 发表于 2024-11-20 08:08

红影 发表于 2024-11-19 20:57
江南又是最快完成作业的呢，很赞

我多套套也是在熟悉老师的代码设置结构。

梦江南 发表于 2024-11-20 08:08

红影 发表于 2024-11-19 20:57
江南又是最快完成作业的呢，很赞

谢谢影子支持鼓励。{:4_187:}

梦江南 发表于 2024-11-20 08:09

樵歌 发表于 2024-11-19 21:05
歌动听，画面好美！

早上问好，谢谢老师欣赏支持！{:4_204:}

夕阳黄昏 发表于 2024-11-20 08:47

本帖最后由 夕阳黄昏 于 2024-11-20 09:44 编辑

梦江南 发表于 2024-11-20 08:05
老师早上好，回老师，我是用的%，不是%全屏看人还要往上呢。老师请施教！
全屏后拉马头琴的人就坐蒙古包上了。
试试看

梦江南 发表于 2024-11-20 09:11

夕阳黄昏 发表于 2024-11-20 08:47
全屏后拉马头琴的人就坐蒙古包上了。
试试

老师的这代码编写又是另一种方法了，人物就固定住不会跑了。谢谢哦！

夕阳黄昏 发表于 2024-11-20 09:47

梦江南 发表于 2024-11-20 09:11
老师的这代码编写又是另一种方法了，人物就固定住不会跑了。谢谢哦！

其实也没改变什么，换了一个方式套用现成代码。

这样做还得到一个好处：评分后帖子仍是完全正常的，今天终于试了一次{:5_106:}

梦江南 发表于 2024-11-20 10:24

夕阳黄昏 发表于 2024-11-20 09:47
其实也没改变什么，换了一个方式套用现成代码。

这样做还得到一个好处：评分后帖子仍是完全正常的，今 ...

成功就是最大的胜利！{:4_187:}

红影 发表于 2024-11-20 21:26

梦江南 发表于 2024-11-20 08:06
影子早上好，我只会套，还套不好呢。

这也是个学习过程呢，江南谦虚了{:4_187:}

红影 发表于 2024-11-20 21:27

梦江南 发表于 2024-11-20 08:08
我多套套也是在熟悉老师的代码设置结构。

是的，这对学习也是有好处的。
页: [1] 2
查看完整版本: 美丽的姑娘（学习黑黑老师的 Breath and Life代码）