送红影一个彩球吧
本帖最后由 马黑黑 于 2022-3-27 12:51 编辑 <br /><br /><style type="text/css">.mmBox {
width: 100%;
min-height: 460px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
.myBall2 {
margin: 10px auto 0;
width: 300px;
height: 300px;
border-radius: 50%;
opacity: .65;
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
animation: turn 2s linear infinite;
}
@keyframes turn {
to { transform: rotate(-1turn); }
}
</style>
<div class="mmBox">
<div class="myBall2"></div>
</div>
<div id="msgDiv1" style="margin-top: 20px;">单击彩球暂停变色、得到渐变样式代码。再单击变色继续</div>
<script language="javascript">
var flag = true;
var bb = document.querySelector('.myBall2');
var msgDiv = document.getElementById('msgDiv1');
var TT = setInterval(wobian, 2000);
bb.onclick = function() {
var ss = bb.style.background;
if(flag == true) {
clearInterval(TT);
flag = false;
msgDiv.innerHTML = ss;
} else {
flag = true;
TT = setInterval(wobian, 2000);
msgDiv.innerHTML = "单击彩球暂停变色、得到渐变样式代码。再单击变色继续"
}
}
function wobian() {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
bb.style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
</script> 本帖最后由 马黑黑 于 2022-3-27 12:52 编辑 <br /><br /><style type="text/css">
.codeBox { margin: auto; padding: 12px 10px; max-width: 760px; box-shadow: 1px 1px 2px #ccc; border-radius: 4px; background: rgba(0, 0, 0, .25); }
.codeBox pre { font: 14px Sans-serif; color: #8b4513; }
</style>
<p>代码：<br><br></p>
<div class="codeBox">
<pre>
<style type=<span style='color: magenta'>"text/css"</span>>
<span style='color: red;'>.mmBox </span>{
<span style='color: blue;'> width</span>: 100%;
<span style='color: blue;'> min-height</span>: 460px;
<span style='color: blue;'> display</span>: flex;
<span style='color: blue;'> justify-content</span>: center;
<span style='color: blue;'> align-items</span>: center;
<span style='color: blue;'> background</span>: #000;
}
<span style='color: red;'>.myBall2 </span>{
<span style='color: blue;'> margin</span>: 10px auto 0;
<span style='color: blue;'> width</span>: 300px;
<span style='color: blue;'> height</span>: 300px;
<span style='color: blue;'> border-radius</span>: 50%;
<span style='color: blue;'> opacity</span>: .65;
<span style='color: blue;'> background-image</span>: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
<span style='color: blue;'> animation</span>: turn 2s linear infinite;
}
<span style='color: red;'>@keyframes turn </span>{
<span style='color: blue;'> to { transform</span>: rotate(-1turn); }
}
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"mmBox"</span>>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"myBall2"</span>><<span style='color: darkred'>/div</span>>
<<span style='color: darkred'>/div</span>>
<script language=<span style='color: magenta'>"javascript"</span>>
setInterval(<span style='color: blue'>function</span>() {
<span style='color: blue'>let</span> c1 = `#${Math.random().toString(16).substr(-6)}`;
<span style='color: blue'>let</span> c2 = `#${Math.random().toString(16).substr(-6)}`;
<span style='color: red'>document</span>.querySelector(<span style='color: magenta'>'.myBall2'</span>).style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}, 2000);
</script>
</pre>
</div> 这个也好玩，色彩变幻漂亮老黑真棒{:4_179:}红影收礼开心 {:4_187:} 这是夜明珠{:4_199:} 红影收好了，因为俺又惦记上了，包括那块肉石{:4_189:} 老黑这个制作真漂亮，可以变色的。{:4_199:} 红影收礼开森~~~~~~~~~~~~~~@红影 大猫咪 发表于 2022-3-27 12:19
这个也好玩，色彩变幻漂亮老黑真棒 红影收礼开心
{:4_190:} 加林森 发表于 2022-3-27 12:23
老黑这个制作真漂亮，可以变色的。
主要是，代码并不复杂 马黑黑 发表于 2022-3-27 12:54
主要是，代码并不复杂
嗯嗯，明白的。 这个好，想要什么颜色组合，点击一下，就能得到这个颜色的代码了。
貌似回帖里只是带了一句要是能停在喜欢的颜色上就好了，结果黑黑就能直接做出来。黑黑太棒了{:4_199:} 我点击了一下，颜色渐变没停，但颜色代码直接显示了，也挺不错。最好渐变也停，这样可以对喜欢的颜色多看几眼{:4_173:} 大猫咪 发表于 2022-3-27 12:19
这个也好玩，色彩变幻漂亮老黑真棒 红影收礼开心
谢谢猫猫，收到这个变色球很开心{:4_187:} 闲言不语 发表于 2022-3-27 12:22
红影收好了，因为俺又惦记上了，包括那块肉石
不语还记着肉石呢，呵呵，这个像不像月食，不停变化着，梦幻一样{:4_173:} 加林森 发表于 2022-3-27 12:24
红影收礼开森~~~~~~~~~~~~~~@红影
谢谢队长，一起欣赏神奇的色彩变幻{:4_187:} 十六进制的颜色变化，而且是不停转动着的，这个真美{:4_187:} 红影 发表于 2022-3-27 13:58
谢谢猫猫，收到这个变色球很开心
又可以做新帖了 {:5_117:}{:4_204:} 红影 发表于 2022-3-27 14:00
谢谢队长，一起欣赏神奇的色彩变幻
老黑太厉害了。我深感佩服的。 果然无论男女都好色{:4_173:}
家里有个声控的灯，喊什么颜色就换什么颜色。 熊大 发表于 2022-3-27 14:14
果然无论男女都好色
家里有个声控的灯，喊什么颜色就换什么颜色。
嗯，色彩是迷人的