烟雨唱扬州
本帖最后由 醉美水芙蓉 于 2023-6-30 23:02 编辑 <br /><br /><style>#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1001px;
height: 640px;
border: 1px solid tan;
background: url('https://pic.imgdb.cn/item/649d93ee1ddac507ccd9943f.png'),
url('https://638183.freep.cn/638183/rb2.jp') no-repeat center/cover,
url('https://pic.imgdb.cn/item/649ee0a91ddac507ccf57e41.gif') no-repeat 300px 480px;
background-blend-mode: screen,screen;
box-shadow: 0 0 8px #000;
position: relative;
--state: paused;
}
.circle {
width: 100px;
height: 100px;
top: 0;left: 0;
border-radius: 50%;
border: 6px solid tan;
border-color: red tan pink purple;
box-sizing: border-box;
background: url('https://pic.imgdb.cn/item/649ed0731ddac507cccb177d.gif') no-repeat center/cover;
display: block;
position: absolute;
offset-path: path('M30 300 Q512 -200, 994 300');
cursor: pointer;
opacity: .65;
animation: rot 6s var(--delay) infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
#vid {
position: absolute;
width: 1001px;
height: 640px;
top:730px;
left:420px;
border-radius: 2%;
opacity: .36;
object-fit: cover;
pointer-events: none;
}
</style>
<div id="mydiv"></div>
<div id="mlist"></div>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music226187480.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let spans = [];
let setRgb = () => {
let ar = [];
for(i = 0; i < 3; i ++) {
ar.push(Math.floor(Math.random() * 256));
}
return ar.join(',');
};
let mkEles = (papa,n) => {
Array.from({length: n}).forEach( (item,key) => {
item = document.createElement('span');
item.className = 'circle';
item.style.cssText += `
border-color: rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()});
offset-distance: ${100 / n * (key + .5)}%;
--delay: ${Math.random() * -6}s;
`;
spans.push(item);
papa.appendChild(item);
});
};
mkEles(mydiv,8);
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script> 我这个小圆里面的看见是空的 小辣椒 发表于 2023-6-29 22:50
我这个小圆里面的看见是空的
小辣椒美女晚上好！ 醉美水芙蓉 发表于 2023-6-29 22:53
小辣椒美女晚上好！
水芙蓉晚上好，你这个小动图重新上传一下，现在是http 要 htpps 的在论坛才会正常 这个里的底图上的另外两张图都是黑黑原帖的，水芙蓉美女可以试着换成自己的{:4_204:} 好美的制作，欣赏问好！{:4_187:} 梦缘 发表于 2023-6-30 10:51
好美的制作，欣赏问好！
谢谢老师支持！ 欣赏精彩制作！ 岩新新 发表于 2023-6-30 12:44
欣赏精彩制作！
谢谢老师支持！ 小辣椒 发表于 2023-6-29 22:59
水芙蓉晚上好，你这个小动图重新上传一下，现在是http
谢谢已纠正！ 马黑黑 发表于 2023-6-29 23:39
要 htpps 的在论坛才会正常
谢谢老师已纠正！@黑黑 老师这个代码视频一直移动，如何改动？ 醉美水芙蓉 发表于 2023-6-30 22:14
谢谢老师已纠正！@黑黑 老师这个代码视频一直移动，如何改动？
你的 HTML 代码如下：
<div id="mydiv"></div>
<div id="mlist"><video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay="" loop="" muted=""></video></div>
父子关系没有体现在包含逻辑上。应改为：
<div id="mydiv">
<div id="mlist"></div>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
就是说，id="mydiv" 的 div 是父元素，音乐列表和视频是它的子元素。
然后，根据需要，在CSS设置好视频尺寸等属性便可。
醉美水芙蓉 发表于 2023-6-30 22:11
谢谢已纠正！
看见了，，现在出来是小动图的，漂亮{:4_199:} 小辣椒 发表于 2023-6-30 22:55
看见了，，现在出来是小动图的，漂亮
代码还有问题，视频会分离，黑黑老师教了，不知哪儿还有问题？ 红影 发表于 2023-6-30 08:58
这个里的底图上的另外两张图都是黑黑原帖的，水芙蓉美女可以试着换成自己的
谢谢已纠正！ 醉美水芙蓉 发表于 2023-6-30 22:58
代码还有问题，视频会分离，黑黑老师教了，不知哪儿还有问题？
你这个视频位置没有放对 小辣椒 发表于 2023-6-30 23:03
你这个视频位置没有放对
有可能！ 醉美水芙蓉 发表于 2023-6-30 23:05
有可能！
不是有可能，你看看黑黑给你的留言就知道了 醉美水芙蓉 发表于 2023-6-30 22:59
谢谢已纠正！
看到了划船美女还有视频。只是视频的位置好像不对。{:4_203:}
页:
[1]