Question

如何创建已经应用了一些过渡的div（类box），还想在同一个div上添加悬停效果的幻灯片动画？

.box {
  background-color: red;
  width: 70px;
  height: 70px;
  transition-property: background, color;
  transition-duration: .2s, 4s;
  transition-timing-function: linear, ease-out;
  transition-delay: 2s, ;
 }


@keyframes slide{
    0% {
     left: 0;
     top: 0;
    }
    50% {
     left: 244px;
     top: 100px;
    }
    100% {
     left: 488px;
     top: 0;
    }
 }



.box:hover .box{
  background-color: yellow;
  color:white;
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
}

HTML：

 <div class="box"> </div>

Answer 1

我刚刚将绝对位置.box {position：absolute}添加到.box类并将.box：hover .box更改为.box：hover。希望这个帮助

＆＃13;

       
     

.box {
          position: absolute;
          background-color: red;
          width: 70px;
          height: 70px;
          transition-property: background, color;
          transition-duration: .2s, 4s;
          transition-timing-function: linear, ease-out;
          transition-delay: 2s, ;
         }
        
        
        @keyframes slide{
            0% {
             left: 0;
             top: 0;
            }
            50% {
             left: 244px;
             top: 100px;
            }
            100% {
             left: 488px;
             top: 0;
            }
         }
        
        
        
        .box:hover{
          background-color: yellow;
          color:white;
          animation-name: slide;
          animation-duration: 2s;
          animation-timing-function: ease-in-out;
          animation-delay: .5s;
          animation-iteration-count: infinite;
        }

＆＃13;

 
        <div class="box"> </div>

＆＃13;

如何使用幻灯片动画在悬停效果上使用“box”类移动div？

1 个答案: