时间戳

首页 > 解决方案 > 如何在不晃动 DIV 的情况下晃动 DIV 标签的内部文本

html - 如何在不晃动 DIV 的情况下晃动 DIV 标签的内部文本

问题描述

我正在创建一个国际象棋游戏，我想invalid movement在用户进行无效移动时显示动画。我的瓷砖是HTML Div Elements包含文本的。我有以下内容@keyframes：

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

但是当我将动画应用到HTML DIV Element整个正方形时，就会抖动。我只希望内部文本动摇，而不是它Div Element本身。如何将@keyframesonly 应用于内部文本？

编辑：包含白色棋子的行的 HTML 标记

   <div class="row">
      <div class="col">p</div>
      <div class="col">p</div>
      <div class="col">p</div>
      <div class="col">p</div>
      <div class="col">p</div>
      <div class="col">p</div>
      <div class="col">p</div>
      <div class="col">p</div>
   </div>

我只是想p动摇。不是DIV包含那个p。你可以在我的 GitHub 中看到我的游戏：https ://github.com/carlos-dubon/chess

标签： htmlcsssasscss-animations

解决方案

推荐阅读