本帖最后由 马黑黑 于 2022-3-27 12:52 编辑
代码:
<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>
<script language="javascript">
setInterval(function() {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
document.querySelector('.myBall2').style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}, 2000);
</script>
|