论坛 › 欢乐水吧 › 高手在民间（学习黑黑老师的晨光代码）

梦江南 发表于 2024-11-8 12:09

高手在民间（学习黑黑老师的晨光代码）

本帖最后由 梦江南 于 2024-11-9 13:58 编辑 <br /><br /><style>
        #mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/672d8775d29ded1a8cdfa7d1.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
        #msvg { position: absolute; left: 50%; bottom: 69%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
        #msvg:hover { transition: 1s; stroke: gray; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 30%, red); pointer-events: none; }
        #fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; padding: 4px 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=82816" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/19/09/03/video6366444fa6565.mp4" autoplay loop muted></video>
<img style="position:absolute; left: 52%; top: 6%;" width=130 height=130src="https://pic.imgdb.cn/item/672d894cd29ded1a8ce1467c.png                               
"></img>
<img style="position:absolute; left: 60px; top: 380px;" width=200 height=170src="https://img.chkaja.com/94ac67d1605513ce.gif                               
"></img>


        <svg id="msvg" width="200" height="200"></svg>
        <span id="fsbtn"></span>
</div>

<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');

dr.pattern('p1', 0, 0, 0.1, 0.1);
dr.circle(10, 10, 5,'silver').addTo('p1');
dr.animate('animate', {
        attributeName: 'r',
        values: '6;5;6',
        dur: '.8s',
        repeatCount: 'indefinite'
});
dr.marker('m1', 5, 5, 2.5, 2.5).addTo('defs');
dr.circle(2.5, 2.5, 1.25, 'red').addTo('m1');
dr.animate('animate', {
        attributeName: 'fill',
        values: 'pink;red;pink',
        dur: '.5s',
        repeatCount: 'indefinite'
});

var tt = 8, r = 80, rad = 360 / tt * Math.PI / 180, dstr = '';

Array(tt).fill('').forEach((_, key) => {
        var x = 100 + r * Math.cos(rad * key), y = 100 + r * Math.sin(rad * key);
        dstr += key === tt - 1 ? `${x} ${y}` : `${x} ${y},`;
});
dr.polygon(dstr, 'url(#p1)', 'gray', 10).style('marker-mid: url(#m1); marker-end: url(#m1); stroke-dasharray: 10 2');

msvg.onclick = () => {
        msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
        aud.paused ? (aud.play(), vid.play(), msvg.unpauseAnimations()) : (aud.pause(), vid.pause(), msvg.pauseAnimations());
};

fscreen.fs('mydiv', 'fsbtn');

aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

起个网名好难 发表于 2024-11-8 12:10

https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif

梦油 发表于 2024-11-8 13:59

“化蝶”是我很喜欢的一支乐曲，谢谢梦江南朋友。

梦江南 发表于 2024-11-8 14:38

起个网名好难 发表于 2024-11-8 12:10


问好老师，谢谢沙发支持。{:4_187:}

梦江南 发表于 2024-11-8 14:38

梦油 发表于 2024-11-8 13:59
“化蝶”是我很喜欢的一支乐曲，谢谢梦江南朋友。

问好梦油老师，谢谢喜欢支持。{:4_187:}

梦油 发表于 2024-11-8 16:35

梦江南 发表于 2024-11-8 14:38
问好梦油老师，谢谢喜欢支持。

这支乐曲百听不厌。

红影 发表于 2024-11-8 16:38

两个小姑娘的本事好大。江南又是最早用新效果做帖的呢，太赞了{:4_199:}

红影 发表于 2024-11-8 16:39

全屏时貌似小播位置就不对了呢，用百分比设置一下位置可能就好了{:4_187:}

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

本帖最后由 梦江南 于 2024-11-8 17:11 编辑

梦油 发表于 2024-11-8 16:35
这支乐曲百听不厌。
我也很喜欢梁祝乐曲。

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

红影 发表于 2024-11-8 16:38
两个小姑娘的本事好大。江南又是最早用新效果做帖的呢，太赞了

小姑娘是杂技人员，谢谢影子支持鼓励。{:4_187:}

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

红影 发表于 2024-11-8 16:39
全屏时貌似小播位置就不对了呢，用百分比设置一下位置可能就好了

黑黑老师的代码对这个用的不是百分比。#msvg { position: absolute; left: 50px; bottom: 20px; cursor: pointer; animation: rot 10s linear infinite var(--state); }不知怎么去调。{:4_201:}

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

梦江南 发表于 2024-11-8 17:08
小姑娘是杂技人员，谢谢影子支持鼓励。

很柔软的身体，特别好看{:4_187:}

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

梦江南 发表于 2024-11-8 17:11
黑黑老师的代码对这个用的不是百分比。#msvg { position: absolute; left: 50px; bottom: 20px; cursor:...

你的位置是 left: 520px; bottom: 443px; 可以用520/宽度，得到左边的百分比，同样上下的用数字除以高度。小播后的图图也可以设置百分比。

梦油 发表于 2024-11-9 11:21

梦江南 发表于 2024-11-8 17:06
我也很喜欢梁祝乐曲。

我很高兴，咱们有相近的喜好。

梦江南 发表于 2024-11-9 14:01

红影 发表于 2024-11-8 23:40
很柔软的身体，特别好看

杂技演员的身体就是这么柔软，像无骨似的。

梦江南 发表于 2024-11-9 14:04

红影 发表于 2024-11-8 23:43
你的位置是 left: 520px; bottom: 443px; 可以用520/宽度，得到左边的百分比，同样上下的用数字除以高度 ...

这也可以用%来做的，知道了。谢谢影子指导，这下把比例调整差不多了。就是小东西还差点。{:4_187:}

梦江南 发表于 2024-11-9 14:05

梦油 发表于 2024-11-9 11:21
我很高兴，咱们有相近的喜好。

梁祝的旋律非常优美。

梦油 发表于 2024-11-9 14:36

梦江南 发表于 2024-11-9 14:05
梁祝的旋律非常优美。

我家有十多种乐器演奏的《梁祝》盒带，这还是几十年前的存货呢。

梦江南 发表于 2024-11-9 15:49

梦油 发表于 2024-11-9 14:36
我家有十多种乐器演奏的《梁祝》盒带，这还是几十年前的存货呢。

哇，十多种乐器演奏的《梁祝》盒带，可见老师对《梁祝》的喜欢了。

我是被当时俞丽拿小提琴协奏曲梁祝所迷住的。

梦油 发表于 2024-11-9 17:24

梦江南 发表于 2024-11-9 15:49
哇，十多种乐器演奏的《梁祝》盒带，可见老师对《梁祝》的喜欢了。

我是被当时俞丽拿小提琴协奏曲梁祝 ...

是啊，各种乐器演奏的“梁祝”有各种不同特色。

查看完整版本: 高手在民间（学习黑黑老师的晨光代码）