如何让文本固定在动画 div 中？

Question

我无法在动画 div 内添加文本。如果我在 div 内添加文本，它会显示在 div 外，因为我正在使用 border-radius。

我需要文本在 div 动画时保持固定。

HTML

<body>
<div>Home</div>
</body>

CSS

body{
  background-color: #ADEAFF;
  padding:10%;
}
div {
  width: 200px;
  height: 200px;
  background-color: #eff0f2;
  border-radius:50% 50% 50% 0;
  box-shadow: 2px 3px 8px #aaa, inset 5px 3px 8px #fff;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  
}
@keyframes square-to-circle {
  0%  {
    transform:rotate(0deg);
  }
  5%  {
    transform:rotate(10deg);
  }
  10%  {
    transform:rotate(20deg);
  }
  15%  { 
    transform:rotate(30deg);
  }
  20% {  
    transform:rotate(40deg);
  }
   25% {  
    transform:rotate(50deg);
  }
     30% {  
    transform:rotate(60deg);
  }
     35% {  
    transform:rotate(70deg);
  }
     40% {  
    transform:rotate(80deg);
  }
     45% {  
    transform:rotate(90deg);
  }
     50% {  
    transform:rotate(100deg);
  }
     55% {  
    transform:rotate(110deg);
  }
     60% {  
    transform:rotate(120deg);
  }
     65% {  
    transform:rotate(130deg);
  }
     70% {  
    transform:rotate(140deg);
  }
     75% {  
    transform:rotate(150deg);
  }
     80% {  
    transform:rotate(160deg);
  }
     85% {  
    transform:rotate(170deg);
  }
     90% {  
    transform:rotate(180deg);
  }
     95% {  
    transform:rotate(190deg);
  }
     100% {  
    transform:rotate(200deg);
  }

}

Answer 1

你需要把文本放在移动之外 div 否则没有最简单的方法来保持文本固定

尝试https://jsfiddle.net/hss3s3bn/7/

如果您希望文本应该在动画 div 内，那么您需要将文本包裹在 <p> 或 <span> 或 <div> 内，并使用任何 class并在其上应用反向动画

Answer 2

问题是您正在为整个 <div> 设置动画，因此无论您做什么，div 中的文本和所有子项都将继承 transform。你需要打破它。

您可以将文本和表盘分离成它们自己的元素并将其放入容器元素中，然后仅将转换应用于表盘。这样只有表盘在移动，没有别的。如果您将容器设置为具有 position: relative，则您可以 absolute 根据您的需要在该容器中定位元素。

您可以在此处看到它已完成，或者如果您愿意 jsFiddle。

body{
  background-color: #ADEAFF;
  padding:10%;
}

.container {
  position: relative;
}

.text {
  position: absolute;
  top: 90px;
  left: 90px;
  z-index: 2;
}

.dial {
  width: 200px;
  height: 200px;
  background-color: #eff0f2;
  border-radius:50% 50% 50% 0;
  box-shadow: 2px 3px 8px #aaa, inset 5px 3px 8px #fff;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  
}

@keyframes square-to-circle {
  0%  {
    transform:rotate(0deg);
  }
  5%  {
    transform:rotate(10deg);
  }
  10%  {
    transform:rotate(20deg);
  }
  15%  { 
    transform:rotate(30deg);
  }
  20% {  
    transform:rotate(40deg);
  }
   25% {  
    transform:rotate(50deg);
  }
     30% {  
    transform:rotate(60deg);
  }
     35% {  
    transform:rotate(70deg);
  }
     40% {  
    transform:rotate(80deg);
  }
     45% {  
    transform:rotate(90deg);
  }
     50% {  
    transform:rotate(100deg);
  }
     55% {  
    transform:rotate(110deg);
  }
     60% {  
    transform:rotate(120deg);
  }
     65% {  
    transform:rotate(130deg);
  }
     70% {  
    transform:rotate(140deg);
  }
     75% {  
    transform:rotate(150deg);
  }
     80% {  
    transform:rotate(160deg);
  }
     85% {  
    transform:rotate(170deg);
  }
     90% {  
    transform:rotate(180deg);
  }
     95% {  
    transform:rotate(190deg);
  }
     100% {  
    transform:rotate(200deg);
  }
  
}

<body>
<div class="container">
  <span class="text">Home</span>
  <div class="dial"></div>
</div>
</body>

如何让文本固定在动画 div 中？

How to get the text to be fixed inside the animating div?

html

css

animation

keyframe

css-animations