Question

这是我的HTML：

nav {
 background:linear-gradient(#0099cc,#0e2377);
 width: 100%;
 box-shadow: 0px 3px 12px 2px #000;
 height: 80px;
}

nav ul {
 margin: 0;
 list-style: none;
}

nav li {
 display: inline-block;
 line-height: 80px;
 font-size: 28px;
 word-spacing: 12px;
}

nav a {
 display: block;
 text-decoration: none;
 color: #fff;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 0px;
 padding-bottom: 0px;
}

nav li:hover a {
 color: #fff;
}

nav li:hover { 
 background:linear-gradient(#cc0000,#660000);
 height: 80px;
}

这是我的CSS：

<li>

这是一个JSFIDDLE：aurelia

当有人悬停在transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s;上时，如何添加以下CSS？我知道这很棘手，因为它是一个线性渐变

var arr1 = [0, 1, 2, 1, 0];
var arr2 = [1, 0, 0, 3, 0];
var result = [];

for(var i = 0; i < arr1.length; i++) {
  if (arr1[i] > arr2[i]) {
    result.push(arr1[i]);  
  } else {
    result.push(arr2[i]);
  }
}

Answer 1

你可以得到的最接近的是两个节点堆叠在一起，一个节点与你想要的每个渐变，并转换顶部的不透明度：

#container {
  position:relative; width: 100px;height:100px;
}

#one, #two {
  position:absolute; top:0;left:0;right:0;bottom:0;
}

#one {
  background: linear-gradient(red, blue);
}

#two {
  background: linear-gradient(white, black);
  transition: opacity 1s;
}

#two:hover {
  opacity:0
}

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
</div>

将过渡添加到背景：线性渐变

1 个答案: