將鼠標懸停在屏幕上的逆向動畫

我試圖創建一個下拉菜單，當我將鼠標懸停在菜單觸發器上方時，鼠標懸停在上方，並再次向上滑動。滑下完美的作品，但我無法讓滑塊工作。這將是很好，如果我能得到純CSS 這裏的解決方案是我的jsfiddle：https://jsfiddle.net/kp073okj/ 而對於誰現在想要的代碼，你的球員，那就是：將鼠標懸停在屏幕上的逆向動畫

的HTML代碼：

<div class="Dropdown"> 
<img src="Images/Dropdown.png" class="Dropdown-Button"> 
<div class="Dropdown-Content"> 
    <a href="#">Informationen</a> 
    <a href="#">SocialMedia</a> 
    <a href="#">Anmeldung</a> 
    <a href="#">Dokumentation</a> 
</div> 
</div>

CSS-代碼：

.Dropdown { 
    position: fixed; 
    z-index: 250; 
    display: block; 
    width: 2%; 
    height: auto; 
    margin-left: 80%; 
} 

.Dropdown-Button { 
    position: relative; 
    z-index: 280; 
    font-size: 1.6vw; 
    border: none; 
    padding-bottom: 0.5em; 
    width: 100%; 
    height: auto; 
    margin-top: 1em; 
} 

.Dropdown-Content { 
    height: 0; 
    overflow: hidden; 
} 

.Dropdown-Content a { 
    color: white; 
    text-decoration: none; 
    padding: 0.5em 4.65em 0.5em 0.8em; 
    display: block; 
    text-align: left; 
    font-size: 1.6vw; 
} 


.Dropdown:hover .Dropdown-Content { 
    display: block; 
    height: 400%; 
    animation-name: dropdown; 
    animation-duration: 1s; 
    position: absolute; 
    z-index: 280; 
    background-color: #303030; 
    text-align: left; 
    margin-left: -0.8em; 
} 

.Dropdown-Content a:hover { 
    background-color: #555; 
} 


@keyframes dropdown { 
    0% {height: 0%; transition: height 2s;} 
    100% {height: 400%; transition: height 2s;} 
}

來源

2016-08-20 Heiko Matthies

一個更好的方法可以是簡單地使用過渡改變高度，沒有動畫。畢竟，你只是在動畫過渡。

總之..這裏的動畫有什麼價值？

body { margin: 50px; background: #aaa;} 
 

 
.Dropdown { 
 
    position: fixed; 
 
    z-index: 250; 
 
    display: block; 
 
    width: 2%; 
 
    height: auto; 
 
    /* margin-left: 80% commented out for snippet */; 
 
} 
 

 
.Dropdown-Button { 
 
    position: relative; 
 
    z-index: 280; 
 
    font-size: 1.6vw; 
 
    border: none; 
 
    padding-bottom: 0.5em; 
 
    width: 100%; 
 
    height: auto; 
 
    margin-top: 1em; 
 
} 
 

 
.Dropdown-Content { 
 
    display: block; 
 
    height: 0%; 
 
    position: absolute; 
 
    z-index: 280; 
 
    background-color: #303030; 
 
    text-align: left; 
 
    margin-left: -0.8em; 
 
    overflow: hidden; 
 
    transition: height 2s; 
 
} 
 

 
.Dropdown-Content a { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 0.5em 4.65em 0.5em 0.8em; 
 
    display: block; 
 
    text-align: left; 
 
    font-size: 1.6vw; 
 
} 
 

 

 
.Dropdown:hover .Dropdown-Content { 
 
    height: 400%; 
 
    transition: height 2s; 
 
} 
 

 
.Dropdown-Content a:hover { 
 
    background-color: #555; 
 
}

<div class="Dropdown"> 
 
<img src="http://placehold.it/140x140" class="Dropdown-Button"> 
 
<div class="Dropdown-Content"> 
 
    <a href="#">Informationen</a> 
 
    <a href="#">SocialMedia</a> 
 
    <a href="#">Anmeldung</a> 
 
    <a href="#">Dokumentation</a> 
 
</div> 
 
</div>

來源

2016-08-20 20:59:10 Scott

將鼠標懸停在屏幕上的逆向動畫

回答

相關問題