纽扣（学习黑师《生命之光》路径效果）
本帖最后由 南无月 于 2023-7-3 19:01 编辑 <br /><br /> <style>#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 768px;
border: 1px solid tan;
background: url('https://s1.ax1x.com/2023/07/03/pCrW3i8.jpg')no-repeat center/cover;
box-shadow: 0 0 8px #000;
position: relative;
overflow: hidden;
--state: paused;
}
.circle {
width: 30px;
height: 30px;
top: 0;left: 0;
border-radius: 50%;
border: 2px dotted tan;
border-color: red tan pink purple;
box-sizing: border-box;
background: url('https://pic.imgdb.cn/item/64a28c661ddac507cce17b5d.png') no-repeat center/cover;
display: block;
position: absolute;
z-index: 99;
offset-path: path('m709.5,178l48.5,-58l58,-27l50,-10l29,22l19,25l18,39l13,49c0.5,0 12.5,40 13.5,41c1,1 13,65 12.5,65c0.5,0 -0.5,50 -1,50c0.5,0 -13.5,69 -14.5,69c-1,0 -43,68 -43.5,68c0.5,0 -30.5,43 -31,43c0.5,0 -55.5,25 -56,25c0.5,0 -42.5,12 -42.5,12c0,0 -81,4 -81.5,4c0.5,0 -58.5,-10 -59,-10c0.5,0 -51.5,-13 -52,-13c0.5,0 -44.5,-18 -45,-18c0.5,0 -38.5,-16 -39,-16c0.5,0 -43.5,-13 -44.5,-13c-1,0 -47,-30 -48,-32c-1,-2 -39,-34 -39.5,-34c0.5,0 -44.5,-37 -45,-37c0.5,0 -22.5,-19 -23,-19c0.5,0 -37.5,-35 -38,-35c0.5,0 -25.5,-23 -26,-23c0.5,0 -43.5,-32 -44,-32c0.5,0 -33.5,-26 -34,-26c0.5,0 -45.5,-9 -46,-9c0.5,0 -30.5,13 -31,13c0.5,0 -17.5,49 -18,49c0.5,0 -8.5,54 -9,54c0.5,0 0.5,46 0,46c0.5,0 14.5,58 14,58c0.5,0 -23.5,-32 -24,-32c0.5,0 -11.5,-47 -12.5,-52c-1,-5 -15,-56 -15,-62c0,-6 -1,-72 -1,-73c0,-1 9,-42 8.5,-42c0.5,0 11.5,-30 11,-30c0.5,0 33.5,-18 33,-18c0.5,0 42.5,5 42,5c0.5,0 81.5,21 81,21c0.5,0 36.5,57 38.5,57c2,0 35,28 35,29c0,1 68,34 67.5,34c0.5,0 59.5,55 59,55c0.5,0 69.5,34 69,34c0.5,0 103.5,39 103,39c0.5,0 115.5,3 115,3c0.5,0 74.5,-2 74,-2c0.5,0 66.5,-26 66,-26c0.5,0 43.5,-60 43,-60c0.5,0 26.5,-47 27.5,-50c1,-3 6,-76 7,-77c1,-1 1,-48 0.5,-48c0.5,0 -20.5,-28 -21.5,-28c-1,0 -34,-32 -36,-32c-2,0 -65,2 -66,2c-1,0 -69,33 -69,33z');
cursor: pointer;
opacity: .95;
animation: rot1 6s var(--delay) infinite linear var(--state);
}
@keyframes rot1 { to { transform: rotate(360deg); } }
.pts {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 10;
opacity: .6;
}
@keyframes rot {
to {
transform: rotate(360deg);
}
}
#vid {
position: absolute;
width: 600px;
height: 50%;
top:200px;
left:150px;
border-radius: 2%;
opacity: .55;
object-fit: cover;
pointer-events: none;
z-index: 2;
}
.panda {
position: absolute;
width: 1024px;
height: 768px;
z-index: 3;
</style>
<div id="mydiv"><canvas class="pts"></canvas><video id="vid" src="https://img.tukuppt.com/video_show/8321488/00/14/84/5e64c3f1bc0fa.mp4" autoplay="" loop="" muted=""></video><div class="panda"><img src="https://pic.imgdb.cn/item/64a299761ddac507ccfa10e2.png" alt="" /></div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1384127698" 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,64);
let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), vid.pause()) : (mydiv.style.setProperty('--state','running'), vid.play());
//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>
@马黑黑 心里默念阿弥陀佛，一定要正常显示{:4_170:} 南无月 发表于 2023-7-3 18:22
@马黑黑 心里默念阿弥陀佛，一定要正常显示
海马路径，复杂的 好神奇！问好！ .panda 选择器的属性设置 cursor: pointer; 应删掉，手型仅提供给播放器按钮 马黑黑 发表于 2023-7-3 18:55
海马路径，复杂的
顺着你生命之光的第二张图边缘画出来的 web页的交互，鼠标的手型指针表示可点击，且点击是要做什么的。本帖，音频的播放控制器是那些旋转的纽扣，它们是手型的鼠标指针就好。 小文 发表于 2023-7-3 18:57
好神奇！问好！
问好小文{:4_187:}看到你的贴子了，很漂亮 南无月 发表于 2023-7-3 19:02
问好小文看到你的贴子了，很漂亮
谢谢鼓励！我会加油！晚上好！ 南无月 发表于 2023-7-3 19:01
顺着你生命之光的第二张图边缘画出来的
路径可以尽情想象去设计 马黑黑 发表于 2023-7-3 18:59
.panda 选择器的属性设置 cursor: pointer; 应删掉，手型仅提供给播放器按钮
是我不仔细。。。把果农图片代码抄过来的，PANDA是抄你熊猫的，历史悠久了。。以后得学着自己组合。。 南无月 发表于 2023-7-3 19:03
是我不仔细。。。把果农图片代码抄过来的，PANDA是抄你熊猫的，历史悠久了。。以后得学着自己组合。。
panda是熊猫 马黑黑 发表于 2023-7-3 19:01
web页的交互，鼠标的手型指针表示可点击，且点击是要做什么的。本帖，音频的播放控制器是那些旋转的纽扣， ...
改了。。。老师再看看。。
这么着一说，我觉得代码又是一团糟，晚上理理{:4_170:} 马黑黑 发表于 2023-7-3 19:03
路径可以尽情想象去设计
这个就挺好{:4_170:}还是要个底样的。 南无月 发表于 2023-7-3 19:04
改了。。。老师再看看。。
这么着一说，我觉得代码又是一团糟，晚上理理
也不必。废码在所难免，效果好了就好 马黑黑 发表于 2023-7-3 19:04
panda是熊猫
{:4_173:}嗯嗯，久之前的贴子了 南无月 发表于 2023-7-3 19:06
嗯嗯，久之前的贴子了
有些标签命名时语义化，便于一眼瞧出它是干嘛的 马黑黑 发表于 2023-7-3 19:06
也不必。废码在所难免，效果好了就好
你这么说，我乐得呲牙{:4_170:} 小文 发表于 2023-7-3 19:03
谢谢鼓励！我会加油！晚上好！
晚上好小文{:4_187:} 马黑黑 发表于 2023-7-3 19:07
有些标签命名时语义化，便于一眼瞧出它是干嘛的
有记号了{:4_173:}熊猫挺好的。。留着吧