米字形圆环小播
本帖最后由 马黑黑 于 2024-7-1 15:58 编辑 <br /><br /><style>.art div, .art p { margin: 10px 0; font: normal 20px sans-serif; }
.art button { color: red; }
.art button:disabled { color: silver; }
.sbox { position: relative; width: 100px; height: 100px; background: linear-gradient(green,lightgreen) repeat-y center/5% 5%, linear-gradient(to right,green,lightgreen) repeat-x center/5% 5%; border: thick double; border-color: green lightgreen; border-radius: 50%; }
.s1::before, .s1::after, .s2::before, .s2::after { position: absolute; content: ''; }
.s1::before { inset: 0; background: inherit; transform: rotate(45deg); }
.s1::after, .s2::after { inset: 40px; background: green; border-radius: 50%; }
.s2::before { inset: 0; background: inherit; transform: translate(120px); }
.s2::after { transform: translate(200px); }
#spa { display: grid; place-items: center; }
#sson1, #sson2 { position: absolute; }
#sson1 { width: 100%; height: 100%; background: inherit; transform: translate(120px); animation: 4s forwards; }
#sson2 { width: 20px; height: 20px; background: green; border-radius: 50%; transform: translate(200px);animation: 2s forwards; }
@keyframes back1 {
50% { transform: translate(120px) rotate(45deg); }
100% { transform: translate(0) rotate(45deg); }
}
@keyframes back2 {
to { transform: translate(0); }
}
.mum { position: relative; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); border: thin solid silver; 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="art">
<h2>米字形圆环小播效果：</h2>
<div class="sbox s1"></div>
<h2>制作方法：</h2>
<p>（一）部件 ：元素 + ::before + ::after</p>
<div class="sbox s2"></div>
<p>（二）组装 ：
<button id="btnzv" type="button" value="zv">点我开始</button>
</p>
<div id="spa" class="sbox">
<div id="sson1"></div>
<div id="sson2"></div>
</div>
<p>（三）米字形圆环小播代码</p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#player {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 100px; <span class="tBlue">height:</span> 100px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">background:</span></cl-cd>
<div class="tGreen"><cl-cd data-idx="6"> /* center/5% 5% 渐变背景图像位置居中、尺寸 5% * 5%</cl-cd>
<cl-cd data-idx="7"> 第一个渐变背景自上而下布置颜色（默认），背景纵向重复</cl-cd>
<cl-cd data-idx="8"> 第二个渐变背景从左到右布置颜色，背景横向重复</cl-cd>
<cl-cd data-idx="9"> */</cl-cd></div>
<cl-cd data-idx="10"> linear-gradient(green,lightgreen) repeat-y center/5% 5%,</cl-cd>
<cl-cd data-idx="11"> linear-gradient(to right,green,lightgreen) repeat-x center/5% 5%;</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">border:</span> thick <span class="tBlue">double</span>;</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">border-color:</span> green lightgreen;</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">border-radius:</span> 50%;</cl-cd>
<cl-cd data-idx="15">}</cl-cd>
<cl-cd data-idx="16">#player::before, #player::after {</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="19">}</cl-cd>
<cl-cd data-idx="20">#player::before {</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">inset:</span> 0;</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">background:</span> inherit;</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">transform:</span> rotate(45deg);</cl-cd>
<cl-cd data-idx="24">}</cl-cd>
<cl-cd data-idx="25">#player::after {</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">inset:</span> 40px;</cl-cd>
<cl-cd data-idx="27"> <span class="tBlue">background:</span> green;</cl-cd>
<cl-cd data-idx="28"> <span class="tBlue">border-radius:</span> 50%;</cl-cd>
<cl-cd data-idx="29">}</cl-cd>
<cl-cd data-idx="30"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="31"> </cl-cd>
<cl-cd data-idx="32"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span>><<span class="tDarkRed">/div</span>></cl-cd>
</div>
</div>
<script>
var aniRun = false;
btnzv.onclick = () => sson1.style.animationName = 'back1';
sson1.onanimationstart = () => btnzv.disabled = true;
sson1.onanimationend = () => {
sson2.style.animationName = 'back2';
};
sson2.onanimationend = () => {
setTimeout( () => {
sson1.style.animationName = '';
sson2.style.animationName = '';
btnzv.disabled = false;
}, 5000);
};
</script>
这一楼留着{:4_173:} 先来看看做个记号，下午要出去，等回来再学习{:4_187:} 进来就看到今天的小播原理。。
知道全是用代码画的~~还是动画。。
代码又展示出它的神奇绘图功力。。
给老师无限无的最新的原滋原味的创意点赞{:4_199:} /* center/5% 5% 渐变背景图像位置居中、尺寸 5% * 50%
这里是两个5%相乘的意思么。为啥写50% 这个组装简直是太形象了。。。动画制作完美 显示，超赞。 南无月 发表于 2024-7-1 12:25
这一楼留着
谢谢 红影 发表于 2024-7-1 12:26
先来看看做个记号，下午要出去，等回来再学习
辛苦 南无月 发表于 2024-7-1 12:28
进来就看到今天的小播原理。。
知道全是用代码画的~~还是动画。。
代码又展示出它的神奇绘图功力。。
{:4_172:} 南无月 发表于 2024-7-1 12:42
/* center/5% 5% 渐变背景图像位置居中、尺寸 5% * 50%
这里是两个5%相乘的意思么。为啥写50%
写错了 南无月 发表于 2024-7-1 12:50
这个组装简直是太形象了。。。动画制作完美 显示，超赞。
{:4_190:} 原来是一个个另件组装起来的，老师太厉害了！ 梦江南 发表于 2024-7-1 17:06
原来是一个个另件组装起来的，老师太厉害了！
其实呢就一个元素，加上它的两个伪元素。HTML代码仅一句：
<div id="player"></div>
它的最终结果都是由 CSS 设计出来的样式 马黑黑 发表于 2024-7-1 17:28
其实呢就一个元素，加上它的两个伪元素。HTML代码仅一句：
老师厉害，了不起！ 梦江南 发表于 2024-7-1 17:49
老师厉害，了不起！
{:4_203:} 等看你徒儿们的活学活用。{:4_174:} 马黑黑 发表于 2024-7-1 15:08
动画演示方向盘零件组装过程。
原理清清楚楚{:4_170:} 马黑黑 发表于 2024-7-1 15:08
写错了
{:4_173:}好哒，
我记得见过这个
敦煌贴子里的no-repeat 50%/60%;是不是跟这个一回事，
一个是位置，一个是大小 马黑黑 发表于 2024-7-1 15:08
理工男画的方向盘零件，再组装。
{:4_170:} 马黑黑 发表于 2024-7-1 15:07
谢谢
以为会有补充说明书啥的。{:4_170:}