首页 文章

CSS在不同事件中多次转换为相同的元素

提问于
浏览 541
5

我有一组链接标记出现在页面加载与translate3D . 这完全没问题 . 但是我需要链接标签来缩放它的悬停 . 哪个不直接 .


有没有办法用CSS实现它?这是代码:

.linkblock {
  margin: 20% 0;
}

.hlink {
  width: 12%;
  height: 60px;
  opacity: 0;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.3);
  display: inline-block;
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  transition: all 0.5s ease;
}

.hlink:hover {
  transform: translate(0px, -20px);
  color: red;
  background: rgba(0, 0, 0, 0.6)
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation: fadeInUp 0.3s ease-in both;
}

.linkblock a:nth-child(1) {
  animation-delay: 1.0s;
}

.linkblock a:nth-child(2) {
  animation-delay: 1.1s;
}

.linkblock a:nth-child(3) {
  animation-delay: 1.2s;
}

.linkblock a:nth-child(4) {
  animation-delay: 1.3s;
}

.linkblock a:nth-child(5) {
  animation-delay: 1.4s;
}

.linkblock a:nth-child(6) {
  animation-delay: 1.5s;
}

.linkblock a:nth-child(7) {
  animation-delay: 1.6s;
}

.linkblock a:nth-child(8) {
  animation-delay: 1.7s;
}
<div class="linkblock">
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>
  <a href="#" class="fadeInUp hlink">fsdfsdf</a>

</div>

3 回答

  • 2

    请试试这个:

    .linkblock{
       margin:20% 0;
      }
    .hlink{
      width:12%;
      height:60px;
      opacity:0;
      padding:0 10px;
      background:rgba(0,0,0,0.3);
      display:inline-block;
      text-align: center;
      color:rgba(0,0,0,0.6);
      transition:all 0.5s ease;
      transform:translate3d(0,0,0); /* add it */
    }
    .hlink:hover{
      transform:translate3d(0,0,0) scale(1.2); /* add it */
      color:red;
      background:rgba(0,0,0,0.6)
    }
      
    @keyframes fadeInUp {
      from{
        opacity:0;
        transform:translate3d(0,100%,0);
      }
      to{
        opacity:1;
        /* transform:translate3d(0,0,0); */ /* remove it */
      }
    }
    .fadeInUp{
      animation:fadeInUp 0.3s ease-in both;
    }
    .linkblock a:nth-child(1){animation-delay:1.0s;}
    .linkblock a:nth-child(2){animation-delay:1.1s;}
    .linkblock a:nth-child(3){animation-delay:1.2s;}
    .linkblock a:nth-child(4){animation-delay:1.3s;}
    .linkblock a:nth-child(5){animation-delay:1.4s;}
    .linkblock a:nth-child(6){animation-delay:1.5s;}
    .linkblock a:nth-child(7){animation-delay:1.6s;}
    .linkblock a:nth-child(8){animation-delay:1.7s;}
    
    <div class="linkblock">
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
    </div>
    
  • 1

    问题是使用 both 允许您保持动画的最后状态,因此动画内的变换将覆盖悬停上永远不会被激活的变换 .

    您可以将动画拆分为2个动画,并使用 bothforwards 只有 opacity ,您可以在动画完成后进行转换 .

    .linkblock {
      margin: 20% 0;
    }
    
    .hlink {
      width: 12%;
      height: 60px;
      padding: 0 10px;
      background: rgba(0, 0, 0, 0.3);
      display: inline-block;
      text-align: center;
      color: rgba(0, 0, 0, 0.6);
      transition: all 0.5s ease;
      opacity:0;
    }
    
    .hlink:hover {
      transform: translate(0px, -20px) scale(1.2);
      color: red;
      background: rgba(0, 0, 0, 0.6)
    }
    
    @keyframes fadeInUp {
      from {
        transform: translate3d(0, 100%, 0);
      }
    }
    @keyframes show {
      to {
        opacity:1;
      }
    }
    
    .fadeInUp {
      animation: fadeInUp 0.3s ease-in,
                  show 0.3s ease-in forwards;
    }
    
    .linkblock a:nth-child(1) {
      animation-delay: 1.0s;
    }
    
    .linkblock a:nth-child(2) {
      animation-delay: 1.1s;
    }
    
    .linkblock a:nth-child(3) {
      animation-delay: 1.2s;
    }
    
    .linkblock a:nth-child(4) {
      animation-delay: 1.3s;
    }
    
    .linkblock a:nth-child(5) {
      animation-delay: 1.4s;
    }
    
    .linkblock a:nth-child(6) {
      animation-delay: 1.5s;
    }
    
    .linkblock a:nth-child(7) {
      animation-delay: 1.6s;
    }
    
    .linkblock a:nth-child(8) {
      animation-delay: 1.7s;
    }
    
    <div class="linkblock">
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
      <a href="#" class="fadeInUp hlink">fsdfsdf</a>
    
    </div>
    
  • 0

    您想要使用 max-height 属性进行动画处理 .

    在悬停时将max-height设置为50px,将属性本身的max-height设置为原始高度

    这是一个工作fiddle

    最终的css文件:

    .linkblock{
       margin:20% 0;
      }
      .hlink{
        width:12%;
        height: 60px;
        max-height: 60px; // add this
        opacity:0;
        padding:0 10px;
        background:rgba(0,0,0,0.3);
        display:inline-block;
        text-align: center;
        color:rgba(0,0,0,0.6);
        transition:all 0.5s ease;
      }
      .hlink:hover{
        max-height: 50px; // add this
        color:red;
        background:rgba(0,0,0,0.6)
      }
    
    @keyframes fadeInUp {
        from{
          opacity:0;
          transform:translate3d(0,100%,0);
        }
        to{
          opacity:1;
          transform:translate3d(0,0,0);
        }
      }
      .fadeInUp{
        animation:fadeInUp 0.3s ease-in both;
      }
      .linkblock a:nth-child(1){animation-delay:1.0s;}
      .linkblock a:nth-child(2){animation-delay:1.1s;}
      .linkblock a:nth-child(3){animation-delay:1.2s;}
      .linkblock a:nth-child(4){animation-delay:1.3s;}
      .linkblock a:nth-child(5){animation-delay:1.4s;}
      .linkblock a:nth-child(6){animation-delay:1.5s;}
      .linkblock a:nth-child(7){animation-delay:1.6s;}
      .linkblock a:nth-child(8){animation-delay:1.7s;}
    

相关问题