独龙戏珠 （学习黑黑老师的Beyond the sky代码）
本帖最后由 梦江南 于 2024-11-18 09:37 编辑 <br /><br /><style>#pa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 802px; background: url('https://pic.imgdb.cn/item/67380fbbd29ded1a8c4a8780.gif') no-repeat center/cover; filter: url(#f1); box-shadow: 4px 4px 8px #333; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute;display: none; }
.vid { position: absolute; object-fit: cover; mix-blend-mode: normal; }
.vid:nth-of-type(1) { width: 100%; height: 0; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
.vid:nth-of-type(2) { left: 41%; bottom: 42%; width: 200px; height: 200px; border-radius: 50%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=407007278" autoplay loop disablePictureInPicture></audio>
<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg"></svg>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/15/18/10/16/video65042d88783fd.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/48/5b441035c5496.mp4" autoplay loop muted disablePictureInPicture></video>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var vids = pa.querySelectorAll('.vid');
var dr = Dr.dr('msvg');
dr.draw('filter', {id: 'f1'});
dr.draw('feImage', {
href: '',
x: '20%',
y: 0,
width: 602,
height: 720,
result: 'img1',
}).addTo('f1');
dr.draw('feBlend', {
in: 'img1',
in2: 'SourceGraphic',
mode: 'screen',
}).addTo('f1');
vids.onclick = () => {
aud.paused ? aud.play() : aud.pause();
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
</script> 赞！这创意不错. 夕阳黄昏 发表于 2024-11-16 12:32
赞！这创意不错.
这帖就有定位了，可以随意移动位置。 夕阳黄昏 发表于 2024-11-16 12:32
赞！这创意不错.
谢谢老师沙发支持，中午好！ 梦江南 发表于 2024-11-16 12:34
这帖就有定位了，可以随意移动位置。
都一样的 金龙扩宝{:4_189:}看样纸要咬人{:4_173:} 夕阳黄昏 发表于 2024-11-16 13:03
都一样的
想想应该也是一样的。就是找不北了。 樵歌 发表于 2024-11-16 13:21
金龙扩宝看样纸要咬人
金龙要守住，又像是在跟珠宝玩，样子是有点不友好。{:4_173:} 樵歌 发表于 2024-11-16 13:21
金龙扩宝看样纸要咬人
谢谢樵歌老师支持，很喜欢听老师唱歌。问好！ 你是另辟蹊径啊，{:5_117:}二龙戏珠变成了独龙戏珠。那条龙打油去了吧？变成油龙了。{:5_106:}{:5_106:}{:5_106:} 梦油 发表于 2024-11-16 14:08
你是另辟蹊径啊，二龙戏珠变成了独龙戏珠。那条龙打油去了吧？变成油龙了。{:5 ...
哈哈，梦油老师说得没错，一条龙去打油了，还未回来。{:4_173:} 梦江南 发表于 2024-11-16 14:12
哈哈，梦油老师说得没错，一条龙去打油了，还未回来。
好啊，油龙在油坊安营扎寨啦{:5_106:} 欣赏梦江南的好制作，想法和制作都是懂了脑子的 谢谢梦江南精彩分享{:4_187:} 梦油 发表于 2024-11-16 14:16
好啊，油龙在油坊安营扎寨啦
油坊老板要高抬贵手哦。{:4_173:} 小辣椒 发表于 2024-11-16 15:00
欣赏梦江南的好制作，想法和制作都是懂了脑子的
问好小辣椒，谢谢欣赏支持。周末快乐！{:4_204:} 小辣椒 发表于 2024-11-16 15:00
谢谢梦江南精彩分享
谢谢您的热情鼓励。傍晚好！ 构思很好，制作也很漂亮。这条巨龙如此灵活又威武，很赞{:4_199:} 制作还有点问题，换成熊猫视频后，那个滤镜用法要重新设计了，否则有logo而且中间部分缺少了呢。
其次，貌似没法暂停？ 红影 发表于 2024-11-16 17:05
构思很好，制作也很漂亮。这条巨龙如此灵活又威武，很赞
问好影子，谢谢支持。{:4_204:}