Question

这个想法是我有一个导航栏，在它下面是一个页脚。导航栏中的链接具有特色图像。当您悬停链接时，图像会从导航栏滑出。这应该只做CSS。

HTML

<nav class="navigation">navbar
    <div class="singleelement">
        <div class="container">
            <div class="title">
                Some Title1
            </div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
    <div class="singleelement">
        <div class="container">
            <div class="title">
                Some Title2
            </div>
            <div class="titlepicture">some picture</div>
        </div>
    </div>
</nav>
<footer>somefooter text </footer>

CSS

.titlepicture{
    background-color: green;
    width: 300px;
    height: 100px;
}
.title{
    background-color: rgba(255, 235, 145, 0.60);

}
.container{
    position: absolute;
    -webkit-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 1.4s;
    -ms-transition-duration: 1.4s;
    transition-duration: 1.4s;
}
.container:hover{
    top: -100px;
}
.singleelement{
    display: inline-block;
    position: relative;
}
nav {
    margin-top: 150px;
    background: aliceblue;
}

Answer 1

尝试类似codepen之类的内容。我绝对定位了图像，并使用css变换将它们放在画布上，并使用过渡将它们重新悬停。像这样：

nav {
  width: 100%;
  height: 60px;
  background: green;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

nav .singleelement {
  width: 50%;
  height: 60px;
  float: left;
  text-align: center;
  position: relative;
}

nav .singleelement .titlepicture {
  width: 100%;
  height: 200px;
  background: red;
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(0, -200px, 0);
  transition: transform 0.25s ease;
}

nav .singleelement:hover .titlepicture {
  transform: translate3d(0, 60px, 0);
}

悬停链接会使图像从带有css3的导航栏滑出？

1 个答案: