双声恨
本帖最后由 马黑黑 于 2024-3-3 08:38 编辑 <br /><br /><style>#papa {
margin: 0 0 0 calc(50% - 721px);
width: 1280px;
height: 640px;
background: black;
z-index: 1;
position: relative;
}
#papa::before {
position: absolute;
content: '';
inset: 0;
background:
url('https://638183.freep.cn/638183/t24/webp/ulug.webp') no-repeat center/cover,
radial-gradient(pink,transparent,red);
background-blend-mode: multiply;
box-shadow: 3px 3px 8px #333;
}
#player {
margin: 60px;
width: 120px;
height: 120px;
cursor: pointer;
position: absolute;
animation: rot 6s linear infinite var(--state);
}
#player::before, #player::after {
position: absolute;
content: '';
width: 100%;
height: 50%;
background:
repeating-radial-gradient(circle, transparent, snow, transparent 8px),
repeating-linear-gradient(to right, orange, white, orange 4px);
clip-path: polygon(0 100%, 28% 56%, 50% 56%, 50% 0, 72.5% 56%, 72.5% 100%);
}
#player::after {
top: 50%;
transform: rotate(180deg);
}
#vid {
position: absolute;
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 50%;
pointer-events: none;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5248767" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" loop muted></video>
<div id="player"></div>
</div>
<script>
var mState = () => aud.paused
? (papa.style.setProperty('--state','paused'), vid.pause())
: (papa.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<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>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></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% - 721px);</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 1280px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 640px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">background:</span> black;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">z-index:</span> 1;</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">#papa::before {</cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">inset:</span> 0;</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">background:</span></cl-cd>
<cl-cd data-idx="15"> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/ulug.webp'</span>) no-repeat center/cover,</cl-cd>
<cl-cd data-idx="16"> radial-gradient(pink,transparent,red);</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">background-blend-mode:</span> multiply;</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">box-shadow:</span> 3px 3px 8px #333;</cl-cd>
<cl-cd data-idx="19">}</cl-cd>
<cl-cd data-idx="20">#player {</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">margin:</span> 60px;</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">width:</span> 120px;</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">height:</span> 120px;</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">cursor:</span> pointer;</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">animation:</span> rot 6s linear infinite <span class="tBlue">var</span>(--state);</cl-cd>
<cl-cd data-idx="27">}</cl-cd>
<cl-cd data-idx="28">#player::before, #player::after {</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">width:</span> 100%;</cl-cd>
<cl-cd data-idx="32"> <span class="tBlue">height:</span> 50%;</cl-cd>
<cl-cd data-idx="33"> <span class="tBlue">background:</span></cl-cd>
<cl-cd data-idx="34"> repeating-radial-gradient(circle, transparent, snow, transparent 8px),</cl-cd>
<cl-cd data-idx="35"> repeating-linear-gradient(to right, orange, white, orange 4px);</cl-cd>
<cl-cd data-idx="36"> <span class="tBlue">clip-path:</span> polygon(0 100%, 28% 56%, 50% 56%, 50% 0, 72.5% 56%, 72.5% 100%);</cl-cd>
<cl-cd data-idx="37">}</cl-cd>
<cl-cd data-idx="38">#player::after {</cl-cd>
<cl-cd data-idx="39"> <span class="tBlue">top:</span> 50%;</cl-cd>
<cl-cd data-idx="40"> <span class="tBlue">transform:</span> rotate(180deg);</cl-cd>
<cl-cd data-idx="41">}</cl-cd>
<cl-cd data-idx="42">#vid {</cl-cd>
<cl-cd data-idx="43"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="44"> <span class="tBlue">width:</span> 240px;</cl-cd>
<cl-cd data-idx="45"> <span class="tBlue">height:</span> 240px;</cl-cd>
<cl-cd data-idx="46"> <span class="tBlue">object-fit:</span> cover;</cl-cd>
<cl-cd data-idx="47"> <span class="tBlue">border-radius:</span> 50%;</cl-cd>
<cl-cd data-idx="48"> <span class="tBlue">pointer-events:</span> none;</cl-cd>
<cl-cd data-idx="49">}</cl-cd>
<cl-cd data-idx="50">@keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="51"></<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="52"><br></cl-cd>
<cl-cd data-idx="53"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="54"> <<span class="tDarkRed">audio</span> <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>=5248767"</span> autoplay loop></<span class="tDarkRed">audio</span>></cl-cd>
<cl-cd data-idx="55"> <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4"</span> loop muted></<span class="tDarkRed">video</span>></cl-cd>
<cl-cd data-idx="56"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span>></<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="57"></<span class="tDarkRed">div</span>></cl-cd>
<cl-cd data-idx="58"><br></cl-cd>
<cl-cd data-idx="59"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="60"><span class="tBlue">var</span> mState = () => aud.paused</cl-cd>
<cl-cd data-idx="61"> ? (papa.style.setProperty(<span class="tMagenta">'--state'</span>,<span class="tMagenta">'paused'</span>), vid.pause())</cl-cd>
<cl-cd data-idx="62"> : (papa.style.setProperty(<span class="tMagenta">'--state'</span>,<span class="tMagenta">'running'</span>), vid.play());</cl-cd>
<cl-cd data-idx="63">aud.addEventListener(<span class="tMagenta">'playing'</span>, mState);</cl-cd>
<cl-cd data-idx="64">aud.addEventListener(<span class="tMagenta">'pause'</span>, mState);</cl-cd>
<cl-cd data-idx="65">player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="66"></<span class="tDarkRed">script</span>></cl-cd>
</div>
又是一种风车的做法，这个应该是第四种了呢{:4_199:} 这切割路径很奇特，跟着位置去手画一下，感受不到会得出这样的形状呢{:4_203:} 黑黑总能带来很多惊奇，这个切割方式太奇妙了。这第四种黑黑还直接做成了样例，很赞{:4_199:} 红影 发表于 2024-3-3 09:51
又是一种风车的做法，这个应该是第四种了呢
这个是单元素风车，割法和第三种一样 红影 发表于 2024-3-3 10:00
这切割路径很奇特，跟着位置去手画一下，感受不到会得出这样的形状呢
风车叶组件是有拼装的 马黑黑 发表于 2024-3-3 10:41
这个是单元素风车，割法和第三种一样
不一样的呢，这个两个方向都取完了，那个只是一个方向。 马黑黑 发表于 2024-3-3 10:42
风车叶组件是有拼装的
我把单的拿出来看了一下，很奇特。 红影 发表于 2024-3-3 11:15
我把单的拿出来看了一下，很奇特。
不会的。单的就是上面那一半 红影 发表于 2024-3-3 11:14
不一样的呢，这个两个方向都取完了，那个只是一个方向。
就是说，整体分上半部和下半部。
上下半部，各自按风车的上半部的整体即两个风车叶连起来时切割，然后下半部旋转180度。 马黑黑 发表于 2024-3-3 11:48
不会的。单的就是上面那一半
是的，我是说这个切割路径很难理解。 马黑黑 发表于 2024-3-3 11:50
就是说，整体分上半部和下半部。
上下半部，各自按风车的上半部的整体即两个风车叶连起来时切割，然后 ...
是的，这个是取了半壁江山后的组合。 红影 发表于 2024-3-3 12:31
是的，这个是取了半壁江山后的组合。
{:4_181:} 红影 发表于 2024-3-3 12:30
是的，我是说这个切割路径很难理解。
分六个点。自左下开始，往上走，取点终止于右下。右下和左下两点之间没有点。 这么快就用上了啊 马黑黑 发表于 2024-3-3 12:59
这个如果能在当中加个线，是不是更像四块组合了。 马黑黑 发表于 2024-3-3 13:01
分六个点。自左下开始，往上走，取点终止于右下。右下和左下两点之间没有点。
嗯嗯，最后那两个点是自动闭合的。 红影 发表于 2024-3-3 13:22
嗯嗯，最后那两个点是自动闭合的。
对哦 红影 发表于 2024-3-3 13:22
这个如果能在当中加个线，是不是更像四块组合了。
可以考虑额