gpt4 book ai didi

css - 向下/向上滑动动画

转载 作者:太空宇宙 更新时间:2023-11-04 06:20:04 31 4
gpt4 key购买 nike

在此代码段中,使用关键帧和动画并显示无/ block ,div 动画以在悬停时向下滑动。

h1 { padding: 20px; }
div {
width: 100%; background: pink; padding: 20px;

display: none;
}

body:hover div {
display: block;

-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}

@-webkit-keyframes slide-down {
0% { opacity: 0; -webkit-transform: translateY(-100%); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
0% { opacity: 0; -moz-transform: translateY(-100%); }
100% { opacity: 1; -moz-transform: translateY(0); }
}
<div>Hello</div>
<h1>Hover me</h1>

如何让它在取消悬停时也滑回?

最佳答案

尝试将过渡属性应用于实际元素:

h1 { padding: 20px; }
div {
position: absolute;
width: 100%; background: pink; padding: 20px;
visibility: hidden;
opacity: 0;
transform: translateY(0);
transition: all .3s ease-out;
}

body:hover div {
visibility: visible;
opacity: 1;
transform: translateY(100%);
}
<div>Hello</div>
<h1>hover me</h1>

关于css - 向下/向上滑动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55585303/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com