有人能解释一下为什么我的背景梯度属性不起作用吗?
如何在不改变位置属性的情况下实现背景渐变?
注意:当我使用class="parent“从div中删除position属性时,它可以正常工作。
任何建议,以改善代码也是赞赏的。
var drop = document.querySelector(".drop");
var button = document.querySelector(".button");
button.addEventListener("click", function(){
drop.classList.toggle("animation");
});
body, html{
margin: 0;
padding: 0;
}
body{
background: linear-gradient(to right, #f98866, #ffffff);
}
.parent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
ul{
padding: 0;
margin: 0;
margin-top: 10px;
}
li{
list-style: none;
padding: 15px 70px;
background: #80bd9e;
color: #fff;
font-family: monospace;
text-align: center;
transition: 0.3s;
}
li:hover{
background: #89da59;
transform: skewX(-10deg);
}
a{
text-decoration: none;
color: #000;
}
.button{
padding: 20px 70px;
background: #ff420e;
color: #fff;
font-family: monospace;
font-size: 1.5em;
transition: 0.4s;
}
.button:hover{
cursor: pointer;
}
.animation{
transform: rotateX(-88deg);
opacity: 0;
}
.button:hover{
transform: rotateY(10deg);
}
.drop{
transition: 1s;
}
<!DOCTYPE html>
<html>
<head>
<title>3D dropdown</title>
</head>
<body>
<div class="parent">
<div class="button">Click Me!</div>
<div class="drop animation">
<ul>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
</ul>
</div>
</div>
</body>
</html>
发布于 2018-03-25 16:31:55
body元素没有高度。这就是为什么你的渐变效果不好。也可以使用-moz-和webkit。
var drop = document.querySelector(".drop");
var button = document.querySelector(".button");
button.addEventListener("click", function(){
drop.classList.toggle("animation");
});
body, html{
margin: 0;
padding: 0;
}
body{
background: rgb(#f98866);
background: -moz-linear-gradient(to right, #f98866, #ffffff);
background: -webkit-linear-gradient(to right, #f98866, #ffffff);
background: -o-linear-gradient(to right, #f98866, #ffffff);
background: -ms-linear-gradient(to right, #f98866, #ffffff);
background: linear-gradient(to right, #f98866, #ffffff);
height:100vh;
}
.parent{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
ul{
padding: 0;
margin: 0;
margin-top: 10px;
}
li{
list-style: none;
padding: 15px 70px;
background: #80bd9e;
color: #fff;
font-family: monospace;
text-align: center;
transition: 0.3s;
}
li:hover{
background: #89da59;
transform: skewX(-10deg);
}
a{
text-decoration: none;
color: #000;
}
.button{
padding: 20px 70px;
background: #ff420e;
color: #fff;
font-family: monospace;
font-size: 1.5em;
transition: 0.4s;
}
.button:hover{
cursor: pointer;
}
.animation{
transform: rotateX(-88deg);
opacity: 0;
}
.button:hover{
transform: rotateY(10deg);
}
.drop{
transition: 1s;
}
<!DOCTYPE html>
<html>
<head>
<title>3D dropdown</title>
</head>
<body>
<div class="parent">
<div class="button">Click Me!</div>
<div class="drop animation">
<ul>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
</ul>
</div>
</div>
</body>
</html>
https://stackoverflow.com/questions/49473860
复制相似问题