金色的麦浪 （学习黑黑老师的青春舞曲代码）
本帖最后由 梦江南 于 2024-11-10 12:10 编辑 <br /><br /><style>#mydiv { margin: 30px 0 30px calc(50% - 590px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/672ffd4dd29ded1a8cfe4ecd.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute; left: 44%; top: 10%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#msvg polyline { stroke-dasharray: 4; stroke-dashoffset: 0; transition: 1s; animation: flash 6s linear infinite var(--state); }
#msvg:hover polyline { stroke: white; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; left: 50%; bottom: 15px; color: Yellow; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes flash { to { stroke-dashoffset: 160; } }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2637016197" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/29/17/22/02/video64edb8ba412ef.mp4" autoplay loop muted></video>
<img style="position:absolute; left: 68%; top: 62%;" width=210 height=250src="https://pic.imgdb.cn/item/67300895d29ded1a8c057a23.webp
"></img>
<img style="position:absolute; left: 20%; top: 60%;" width=200 height=270src="https://pic.imgdb.cn/item/673007b1d29ded1a8c04dfad.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.symbol('sb', '0, 0, 100, 100');
var tt = 20;
for(var i = 0; i < tt; i ++) {
dr.polyline('30 5, 50 50, 70 5', 'none', 'Lime ',3).transform(`rotate(${360 / tt * i} 50 50)`).addTo('sb');
}
dr.use('#sb');
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> 有趣，两条路上，一个是女子在走动，一个女子静立，很奇妙的构图{:4_187:} 红影 发表于 2024-11-10 12:26
有趣，两条路上，一个是女子在走动，一个女子静立，很奇妙的构图
这是两个不同人人生的两条路，一个是继续砥砺前行，一个是静静观望。您说谁的人生会更好呢？ 红影 发表于 2024-11-10 12:26
有趣，两条路上，一个是女子在走动，一个女子静立，很奇妙的构图
谢谢影子沙发支持鼓励，下午好！{:4_187:} 金秋是收获的季节，同样也是梦江南朋友收获的时候。 梦油 发表于 2024-11-10 14:39
金秋是收获的季节，同样也是梦江南朋友收获的时候。
下午问好，谢谢梦油老师支持鼓励。
在这里我收获了友情，和知识。 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif
评分后，全屏按钮和转动的图形都消失了，刷新后才会再出现。
https://pic.imgdb.cn/item/6730a8bbd29ded1a8c83ba88.jpg 起个网名好难 发表于 2024-11-10 15:30
评分后，全屏按钮和转动的图形都消失了，刷新后才会再出现。
这是怎么回事？代码没动过啊，只是加了两个人物，给圆转换了种颜色。{:4_201:} 梦江南 发表于 2024-11-10 15:59
这是怎么回事？代码没动过啊，只是加了两个人物，给圆转换了种颜色。
不是您帖子的问题，所有使用相同代码的都一样。 梦江南 发表于 2024-11-10 14:57
下午问好，谢谢梦油老师支持鼓励。
在这里我收获了友情，和知识。
对，我们都是好朋友。 好看，欣赏了{:4_204:} 梦江南 发表于 2024-11-10 14:04
这是两个不同人人生的两条路，一个是继续砥砺前行，一个是静静观望。您说谁的人生会更好呢？
肯定继续行走的将有更好的前程呢，这个帖子的寓意还挺深呢{:4_187:} 梦江南 发表于 2024-11-10 14:05
谢谢影子沙发支持鼓励，下午好！
江南很勤奋，每个作业都认真完成，很赞{:4_187:} 起个网名好难 发表于 2024-11-10 16:46
不是您帖子的问题，所有使用相同代码的都一样。
哦，早上问好！ 梦油 发表于 2024-11-10 16:49
对，我们都是好朋友。
特别是这里的管理员，都很好。早上好！ 朵拉 发表于 2024-11-10 18:43
好看，欣赏了
问好朵拉，谢谢支持。{:4_204:} 红影 发表于 2024-11-10 20:35
肯定继续行走的将有更好的前程呢，这个帖子的寓意还挺深呢
这也是对自己的一种鼓励和鞭策。 红影 发表于 2024-11-10 20:37
江南很勤奋，每个作业都认真完成，很赞
没有数学和英语基础，只能以套用老师们的代码作为作业来完成了。惭愧！ 梦江南 发表于 2024-11-11 08:54
特别是这里的管理员，都很好。早上好！
这里是一个没有硝烟的和谐（松散）集体。 梦江南 发表于 2024-11-11 08:58
这也是对自己的一种鼓励和鞭策。
人生只要不停步，总有一天到达目标的。
页:
[1]
2