将鼠标悬停在屏幕上的逆向动画

我试图创建一个下拉菜单，当我将鼠标悬停在菜单触发器上方时，鼠标悬停在上方，并再次向上滑动。滑下完美的作品，但我无法让滑块工作。这将是很好，如果我能得到纯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

将鼠标悬停在屏幕上的逆向动画

回答

相关问题