Question

我需要通过从右到左的平滑过渡来更改某些背景颜色，而不仅仅是以统一的方式更改颜色。现在，我将向您提供我的代码，以便使它更加清晰。

不允许使用jQuery /库

HTML

<div id=astuccio>
    <div class="cBox" id="cBox1">
        <div class="color" id="color1"></div>
    </div>
    <div class="cBox" id="cBox2">
        <div class="color" id="color2"></div>
    </div>
    <div class="cBox" id="cBox3">
        <div class="color" id="color3"></div>
    </div>
</div>

<button class="js" id="roll">&#8897;</button>

CSS

#astuccio {
    grid-row: 1/2;
    margin: auto;
}

.cBox {
    width: 50px;
    height: 50px;
    display:inline-block;
    margin: auto;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
    border: 0.5px solid rgb(175,175,175);
    box-sizing: content-box;
    transition: 0.5s;
}

#cBox1 {
    margin: auto 0px auto auto;
}

#cBox2 {
    width: 100px;
    height: 100px;
}

#cBox3 {
    margin: auto auto auto 0;
}

.color{
    width: 40px;
    height: 40px;
    vertical-align: middle;  
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    position: relative;
    background: tomato;
    display: inline-block;
    border: 1px solid black;
    z-index: 10;
    transition: 0.5s linear;
    transform-origin: left;
}

#color1 {
    background: pink;
}

#color2 {
    width: 90px;
    height: 90px;
    background: pink;
    transition-delay: 0.2s;
}

#color3 {
    background: pink;
    transition-delay: 0.4s;

}

#roll {
    grid-row: 2/3;
    width: 45px;
    height: 45px;
    margin: auto;
    cursor: pointer;
    border-radius: 500px 500px 500px 500px;
    -moz-border-radius: 500px 500px 500px 500px;
    -webkit-border-radius: 500px 500px 500px 500px;
    border: 1px solid rgba(0,0,0,0.5);
    box-sizing: border-box;
    line-height: 45px;
    text-align: center;
    font-weight: lighter;
    font-size: 1.2em;
    color: rgba(0,0,0,0.9);
    background: transparent;
}

JavaScript

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}



function gestoreGiro () {
    bott.disabled= true;
    bott.setAttribute("style", "background:gray")
    t = setInterval(scorri, 500);
    setTimeout(riattiva, 5000);
}

function riattiva() {
    document.getElementById('roll').disabled = false;
    bott.setAttribute("style", "background:none");
}

function scorri() {
    var n = i - 1;
    var lunghezza = listaColori["colori"].length;
    const valore = getRandomInt(listaColori["colori"].length);


    if (i>listaColori["colori"].length-1) {
        i = 0;
    }    
    if (n < 0) {
        n = lunghezza-1;
    }    
    if (m>listaColori["colori"].length-1) {
        m = 0;
    }

    S1.setAttribute("style","background:"+listaColori["coloriHEX"][n]);
    S2.setAttribute("style","background:"+listaColori["coloriHEX"][i]);
    S3.setAttribute("style","background:"+listaColori["coloriHEX"][m]);
    i++;
    m++;
    flag++;

    if (flag==13) {
        clearInterval(t);
        n = valore-1;
        m = valore +1;
        if (n < 0) {
            n = lunghezza-1;
        }
        if (m>lunghezza-1) {
            m = 0;
        }

        S1.setAttribute("style","background:"+listaColori["coloriHEX"][n]);
        S2.setAttribute("style","background:"+listaColori["coloriHEX"][valore]);
        S3.setAttribute("style","background:"+listaColori["coloriHEX"][m]);

        flag = 0;
    }
}

var S1 ;
var S2 ;
var S3 ;
var bott;
var i = 0;
var m = i+1;
var t;
var flag = 0;


function gestoreLoad () {

    S1 = document.getElementById("color1") ;
    S2 = document.getElementById("color2") ;
    S3 = document.getElementById("color3") ;
    bott = document.getElementById("roll");
    bott.onclick = gestoreGiro;  

}


window.onload = gestoreLoad;

var listaColori = {
    colori: ["verde", "giallo", "rosso", "blu", "nero", "bianco"],
    coloriHEX: ["#2e8b57", "#ffd700", "#ff6347", "#4169e1", "#000000", "#ffffff"]
}

对不起，我的解释很抱歉：很高兴回答您的疑问。

Answer 1

您可以使用CSS转换非常简单地完成此操作。此方法适用于：hover。工作CodePen。

HTML

<div>
  <p>This is some text</p>
</div>

CSS

div {
  padding: 20px;
  width: 100px;
  background: linear-gradient( to left, red 50%,     blue 50% );
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all ease 1s;
  color: white;
}

div:hover {
  background-position: left bottom;
}

从右到左过渡

1 个答案: