0
我不能做出過渡效果，當我在@media 700我設置display: none，但我想讓我的.content全屏在@media 700px，我怎麼能做到這一點？如何正確設置轉換不透明效果
body {
background-color: #eee;
}
.header {
height: 50px;
width: 100%;
border-bottom: 1px solid #999;
}
.container {
min-width: 500px;
max-width: 800px;
height: auto;
margin: 0 auto;
background-color: #fff;
display: table;
}
.container::after {
content: "";
display: block;
clear: both;
}
.content {
padding: 0 15px 0 0;
display: table-cell;
width: 485px;
}
.sidebar {
color: white;
width: 300px;
border-left: 1px solid #ccc;
box-shadow: -15px 0 10px rgba(51, 51, 51, .5);
opacity: 1;
transition: opacity .25s;
background: #000;
display: table-cell;
height: 80vh;
}
.footer {
background-color: #eee;
width: 100%;
height: 50px;
border-top: 1px solid #999;
position: relative;
bottom: 0;
}
@media screen and (max-width: 800px) {
.container {
width: 100%;
}
}
@media screen and (max-width: 500px) {
.container {
width: 500px;
}
}
@media screen and (max-width: 700px) {
.content {
height: 80vh;
padding: 0;
display: block;
margin: 0 auto;
}
.sidebar {
opacity: 0;
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="header">
</div>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro maxime eligendi libero minus officiis inventore debitis, earum vero perferendis ut iste corrupti culpa. Consequuntur minus natus earum voluptas quos asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro maxime eligendi libero minus officiis inventore debitis, earum vero perferendis ut iste corrupti culpa. Consequuntur minus natus earum voluptas quos asperiores.
</div>
<div class="sidebar">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
能否請你寫你的問題描述清楚？你的問題不是很清楚可以理解的。 –
現在怎麼樣？ –
你想顯示/隱藏側邊欄的平滑淡化效果嗎？ –