A journey of the heart
<style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
box-shadow: 3px 3px 6px gray;
overflow: hidden;
position: relative;
}
#player {
top: 20px;
right: 20px;
width: 200px;
height: 200px;
cursor: pointer;
position: absolute;
}
#player::before, #player::after {
position: absolute;
content: '';
}
#player::before {
inset: 0;
clip-path: path('M110.00 100.00 147.50 182.27 95.00 108.66 5.00 100.00 95.00 91.34 147.50 17.73z');
background: radial-gradient(green,red);
animation: rot 5s linear infinite var(--state);
}
#player::after {
inset: -5px;
border: 8px dashed green;
border-radius: 50%;
animation: rot 7s linear infinite var(--state);
}
#papa video {
position: absolute;
top: -60px;
width: 100%;
height: 700px;
object-fit: cover;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1615339" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2422006/00/01/94/5b4fdb26cf95b.mp4" loop muted></video>
<div id="player"></div>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());
var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vidplay(false)) : (papa.style.setProperty('--state', 'running'), vidplay(true));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
马黑黑 发表于 2024-2-26 12:18
这就说的不对了。人类的需求远高于其他生物的需求。
但基本需求必须是被保障的，而动物，连基本的生存需求都成问题呢。 <h2>帖子代码</h2>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class="mum">
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">#papa {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">margin:</span> 0 0 0 calc(50% - 593px);</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 1024px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 640px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">box-shadow:</span> 3px 3px 6px gray;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">overflow:</span> hidden;</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="9">}</cl-cd>
<cl-cd data-idx="10">#player {</cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">top:</span> 20px;</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">right:</span> 20px;</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">width:</span> 200px;</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">height:</span> 200px;</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">cursor:</span> pointer;</cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="17">}</cl-cd>
<cl-cd data-idx="18">#<span class="tBlue">player:</span>:before, #<span class="tBlue">player:</span>:after {</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="21">}</cl-cd>
<cl-cd data-idx="22">#<span class="tBlue">player:</span>:before {</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">inset:</span> 0;</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">clip-path:</span> path(<span class="tMagenta">'M110.00 100.00 147.50 182.27 95.00 108.66 5.00 100.00 95.00 91.34 147.50 17.73z'</span>);</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">background:</span> radial-gradient(green,red);</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">animation:</span> rot 5s linear infinite <span class="tBlue">var</span>(--state);</cl-cd>
<cl-cd data-idx="27">}</cl-cd>
<cl-cd data-idx="28">#<span class="tBlue">player:</span>:after {</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">inset:</span> -5px;</cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">border:</span> 8px dashed green;</cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">border-radius:</span> 50%;</cl-cd>
<cl-cd data-idx="32"> <span class="tBlue">animation:</span> rot 7s linear infinite <span class="tBlue">var</span>(--state);</cl-cd>
<cl-cd data-idx="33">}</cl-cd>
<cl-cd data-idx="34">#papa video {</cl-cd>
<cl-cd data-idx="35"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="36"> <span class="tBlue">top:</span> -60px;</cl-cd>
<cl-cd data-idx="37"> <span class="tBlue">width:</span> 100%;</cl-cd>
<cl-cd data-idx="38"> <span class="tBlue">height:</span> 700px;</cl-cd>
<cl-cd data-idx="39"> <span class="tBlue">object-fit:</span> cover;</cl-cd>
<cl-cd data-idx="40">}</cl-cd>
<cl-cd data-idx="41">@keyframes rot { to { <span class="tBlue">transform:</span> rotate(1turn); } }</cl-cd>
<cl-cd data-idx="42"></style></cl-cd>
<cl-cd data-idx="43"><br></cl-cd>
<cl-cd data-idx="44"><div <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="45"> <audio <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1615339"</span> autoplay loop></audio></cl-cd>
<cl-cd data-idx="46"> <video class=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2422006/00/01/94/5b4fdb26cf95b.mp4"</span> loop muted></video></cl-cd>
<cl-cd data-idx="47"> <div <span class="tRed">id</span>=<span class="tMagenta">"player"</span>></div></cl-cd>
<cl-cd data-idx="48"></div></cl-cd>
<cl-cd data-idx="49"><br></cl-cd>
<cl-cd data-idx="50"><script></cl-cd>
<cl-cd data-idx="51"><span class="tBlue">var</span> vids = <span class="tRed">document</span>.querySelectorAll(<span class="tMagenta">'.vid'</span>);</cl-cd>
<cl-cd data-idx="52"><span class="tBlue">var</span> vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());</cl-cd>
<cl-cd data-idx="53"><span class="tBlue">var</span> mState = () => aud.paused ? (papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'paused'</span>), vidplay(false)) : (papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'running'</span>), vidplay(true));</cl-cd>
<cl-cd data-idx="54">aud.addEventListener(<span class="tMagenta">'pause'</span>, mState);</cl-cd>
<cl-cd data-idx="55">aud.addEventListener(<span class="tMagenta">'playing'</span>,mState);</cl-cd>
<cl-cd data-idx="56">player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="57"></script></cl-cd>
</div>
二楼的代码着色，是 CSS+HTML 格式，不在依赖JS资源。详情请看：
帖子代码在线着色（测试版） - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
原来这个是直接用视频做背景的，漂亮。
纯代码制作的播放器按钮好看，两个伪元素的运动速度还是不同的呢{:4_199:} 马黑黑 发表于 2024-2-25 12:50
二楼的代码着色，是 CSS+HTML 格式，不在依赖JS资源。详情请看：
帖子代码在线着色（测试版） - 马黑黑 ...
这色后变得更清晰了，真好{:4_187:} 红影 发表于 2024-2-25 14:40
这色后变得更清晰了，真好
和之前的着色效果是一样一样的，只是说，酱紫可以不再使用JS来做渲染了 红影 发表于 2024-2-25 14:30
原来这个是直接用视频做背景的，漂亮。
纯代码制作的播放器按钮好看，两个伪元素的运动速度还是不同的呢{: ...
这个设计简单的吧 马黑黑 发表于 2024-2-25 16:47
和之前的着色效果是一样一样的，只是说，酱紫可以不再使用JS来做渲染了
嗯，黑黑辛苦，把这研究得很深。{:4_187:} 马黑黑 发表于 2024-2-25 12:50
二楼的代码着色，是 CSS+HTML 格式，不在依赖JS资源。详情请看：
帖子代码在线着色（测试版） - 马黑黑 ...
看到实例了。。完美。。{:4_187:} 马黑黑 发表于 2024-2-25 16:47
这个设计简单的吧
也很好看呢{:4_187:} 背景视频朦胧，飘飘缈缈，仿佛在昆仑山。
右边小播外圈跟网站不同，网站是圆点，这里是方形的。。。 路径式的大风车指针可以更换成别的样式 南无月 发表于 2024-2-25 18:56
路径式的大风车指针可以更换成别的样式
这个自然可以 红影 发表于 2024-2-25 18:41
嗯，黑黑辛苦，把这研究得很深。
这没什么研究，是应用 南无月 发表于 2024-2-25 18:45
背景视频朦胧，飘飘缈缈，仿佛在昆仑山。
右边小播外圈跟网站不同，网站是圆点，这里是方形的。。。
具体说是 border 的 style，这里用 dashed，虚线；站里用 dotted，圆点 红影 发表于 2024-2-25 18:42
也很好看呢
觉得好看的都是好人{:4_170:} 马黑黑 发表于 2024-2-25 19:29
这个自然可以
{:4_173:}刚试了几种，没试出更合适的 马黑黑 发表于 2024-2-25 19:31
具体说是 border 的 style，这里用 dashed，虚线；站里用 dotted，圆点
{:4_173:}好吧好吧，突然想起来我翘了十几节课 南无月 发表于 2024-2-25 19:37
好吧好吧，突然想起来我翘了十几节课
这不是翘课问题吧。我也没专门讲这个，什么时候知道都可以。 南无月 发表于 2024-2-25 19:36
刚试了几种，没试出更合适的
也许 double 还行