Question

我是html，javascript和css的新手，我正在使用某人的代码来设置渐变动画。这是一个背景：rgb，我把它改成了背景：rgba。它仍然有效，但那里没有不透明度。

如何让渐变显示不透明度？

代码在这里运行不同，然后在chrome中运行。

JS

var colors = new Array(
    [62,35,255,0.5],
    [60,255,60,0.5],
    [255,35,98,0.5],
    [45,175,230,0.5],
    [255,0,255,0.5],
    [255,128,0,0.5]);

var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.002;

function updateGradient()
{

    if ( $===undefined ) return;

    var c0_0 = colors[colorIndices[0]];
    var c0_1 = colors[colorIndices[1]];
    var c1_0 = colors[colorIndices[2]];
    var c1_1 = colors[colorIndices[3]];

    var istep = 1 - step;
    var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
    var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
    var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
    var a1 = Math.round(istep * c0_0[3] + step * c0_1[3]);
    var color1 = "rgba("+r1+","+g1+","+b1+","+a1+")";

    var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
    var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
    var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
    var a2 = Math.round(istep * c1_0[3] + step * c1_1[3]);
    var color2 = "rgba("+r2+","+g2+","+b2+","+a2+")";

    $('#colorstrip').css({
        background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
        background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

    step += gradientSpeed;
    if ( step >= 1 )
    {
        step %= 1;
        colorIndices[0] = colorIndices[1];
        colorIndices[2] = colorIndices[3];

        //pick two new target color indices
        //do not pick the same as the current one
        colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
        colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

    }
}

setInterval(updateGradient,10);

@import url('https://fonts.googleapis.com/css?family=Pangolin');
/*Hoofdpagina.html styles*/
#colorstrip{
    width: 100%; height: 6%;
    position: fixed;
    top: -5px;
    left:0;
    background-color: rgba(10,10,10,0.5);
    border-bottom-right-radius: 5%;
    border-bottom-left-radius: 5%;


}
#colorstrip:hover{
    background-color: rgba(207, 254, 255, 0.9);
}
body{
    background: url('images/Farm background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
}
nav{
    width: 80%;
}
nav ul{
    text-align: center;
    margin: 0 10% 0 0;
    padding-left: 0;
}
nav ul li{
    width: 25%;
    float: left;
}
/*Styles for everything in <a>*/
nav ul li a{
    list-style-type: none;
    text-decoration: none;

    letter-spacing: 1px;
    font-size: 33px;
    opacity: 0.75;
    filter: alpha(opacity=50);
    font-family: 'Pangolin',cursive;

    color: #000000;

    -o-transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s linear;
}
/*<a> hovering makes some changes*/
 nav ul li a:hover {
     color: #279afe;
     font-size: 36px;
     text-shadow: 1px 3px rgba(0,0,0,0.3);
}

ul{
    list-style-type: none;
    text-decoration: none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://use.fontawesome.com/4f69f01663.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="Gradient.js"></script>
    <script src="gradient.css"></script>
    <link rel="stylesheet" media= "screen" href="styles.css">
    <link rel="icon" href="images/Cocky%20af.png">
    <title>Cocky Clicker</title>
</head>
<body>
    <div id="colorstrip"/>
    <nav>
        <ul>
            <li><a href="Hoofdpagina.html"><i class="fa fa-home" aria-hidden="true"></i>Mainpage!</a></li>
            <li><a href="Clickers.html"><i class="fa fa-gamepad" aria-hidden="true"></i>Play!</a></li>
            <li><a href="Information.html"><i class="fa fa-address-book" aria-hidden="true"></i>About!</a></li>
            <li><a href="Contact.html"><i class="fa fa-address-card" aria-hidden="true"></i>Contact us!</a></li>
        </ul>

    </nav>
</body>
</html>

Answer 1

你生成的rgba，最后一个参数a2和a1使用Math.round函数四舍五入到最接近的数字。因此a2和a1的值总是1.删除a2和a1的舍入并尝试它。

使用不透明度创建渐变动画

1 个答案: