Question

仍然踏上我的css3冒险之旅！基本上我正试图巧妙地左右摇动div左右。我相信我的大部分标记和样式都是正确的，但它只是没有开火。希望对此有所了解。非常感谢任何帮助。

代码如下。

<div class="brief-boxes">
        <div class="details-box">
            <div class="stats">
                <p class="number">1</p>
                <p class="stat-title">title</p>
            </div>
        </div>

        <div class="details-box">
            <div class="stats">
                <p class="number">2</p>
                <p class="stat-title">title</p>
            </div>
        </div>

        <div class="details-box">
            <div class="stats">
                <p class="number">3</p>
                <p class="stat-title">title</p>
            </div>
        </div>
</div>

.brief-boxes {width:100%;}
    .brief-boxes .details-box {color:#fff; float:left; width:32.7%;padding:10px; margin-top:15px;/*min-height:100px;*/ background-color:yellow;}
    .brief-boxes:after {clear:both;display:block;content:'';}
    .brief-boxes .details-box .stats .number {font-size:40px;}
    .brief-boxes .details-box .stats .stat-title {}

CSS3动画：

.details-box:hover {
  animation: shake .5s ease-in-out;
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(-10px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}

再次感谢您的时间。

Answer 1

您是否在Chrome等网络浏览器浏览器中查看代码？您需要确保包含适当的浏览器前缀：

＆＃13;

.brief-boxes {width:100%;}
    .brief-boxes .details-box {color:#fff; float:left; width:32.7%;padding:10px; margin-top:15px;/*min-height:100px;*/ background-color:yellow;}
    .brief-boxes:after {clear:both;display:block;content:'';}
    .brief-boxes .details-box .stats .number {font-size:40px;}
    .brief-boxes .details-box .stats .stat-title {}

.details-box:hover {
  -webkit-animation: shake .5s ease-in-out;
  animation: shake .5s ease-in-out;
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
  }

  20% {
    -webkit-transform: translateX(-10px);
  }

  40% {
    -webkit-transform: translateX(10px);
  }

  60% {
    -webkit-transform: translateX(-10px);
  }

  80% {
    -webkit-transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(-10px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}

＆＃13;

<div class="brief-boxes">
        <div class="details-box">
            <div class="stats">
                <p class="number">1</p>
                <p class="stat-title">title</p>
            </div>
        </div>

        <div class="details-box">
            <div class="stats">
                <p class="number">2</p>
                <p class="stat-title">title</p>
            </div>
        </div>

        <div class="details-box">
            <div class="stats">
                <p class="number">3</p>
                <p class="stat-title">title</p>
            </div>
        </div>
</div>

＆＃13;

Caniuse是确定是否需要包含浏览器前缀的绝佳资源。

div悬停时的横向抖动（仅限CSS3）

1 个答案: