Wie richtig eingerichtet Übergang Opazität Effekt

Ich kann nicht Übergangseffekt machen, wenn in @media 700 ich display: none gesetzt, aber ich möchte meine .content mit Vollbild in @media 700px machen, wie kann ich das tun?Wie richtig eingerichtet Übergang Opazität Effekt

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>

Quelle

2017-07-06 Ramzan Chasygov

Können Sie bitte klare Beschreibung über Ihre Frage schreiben? Deine Frage ist nicht klar verständlich. –

Wie wäre es jetzt? –

Möchten Sie die Seitenleiste mit weichem Fading-Effekt anzeigen/ausblenden? –

Für Seitenleiste Opazität entfernen und Breite als Übergangseigenschaft machen und seine Breite zu Null in Medien 700 und auch add Breite als Übergangseigenschaft zum Inhalt macht und mach seine Breite auf 100% in Medien 700

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; 
 
    transition: width .25s; 
 
} 
 

 
.sidebar { 
 
    color: white; 
 
    width: 300px; 
 
    border-left: 1px solid #ccc; 
 
    box-shadow: -15px 0 10px rgba(51, 51, 51, .5); 
 
    transition: width .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; 
 
    width: 100%; 
 
    
 
    } 
 

 
    .sidebar { 
 
    width: 0px; 
 
    box-shadow: 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>

Quelle

2017-07-06 06:00:03

Wie richtig eingerichtet Übergang Opazität Effekt

Antwort

Verwandte Themen