Question

我正在创建动画https://codepen.io/adsler/pen/bGNWxOe，并且已经创建了div类。我已经用CSS进行了调整。有用。但是，一旦我引入了另一个div类，它不仅会受到第一个div的影响，而且似乎无法通过CSS进行选择。

这是原始照片：

HTML：

<div   
class="random">four<br>
three<br>zero<br>nine</div>

Css：

.random {background. 
color:red;background-image: 
linear-gradient(black, 
white); width: 10px; height: 
200px; font-weight: 900; 
position:relative; font- 
size:20px; left: 20x; 
top:60px; filter:sepia(0); 
color:black; border-radius: 
100px; box-shadow: 90px 90px 
30px 90px #000; text-align: 
center;}

.random {animation: turn 30s 
ease-in infinite; animation. 
direction: alternate. 
reverse;animation-delay: 
2s;} 

@keyframes turn {

0% 
{transform:rotate(1400deg);
width: 1px} 30%. 
{transform:rotatex(7000deg);  
font-size: 30px;} 40% 
{transform:rotatez(360deg); 
 width: 13em} 70%
{width: 10em;}100%
{opacity: 0.9;}

那很好，但是随后，当我通过div类介绍下一个序列时，我找不到具有css的选择器，并且样式受第一个div的影响。

<div 
class="starring">Starring
</div>


.starring {margin-top: 500px 
!important; font-size: 50px 
!important;}

所以我尝试了特异性。

.random.starring {margin. 
 top: 500px 
!important; font-size: 50px 
!important;}

仍然无法选择css和样式仍受先前div影响的starring。

Answer 1

在您的Codepen的html部分下，第一部分的结尾太多。

赞：

<div class="random">four<br>three<br>zero<br>nine</div></div>
<div class="starring">Starring</div>

应为：

<div class="random">four<br>three<br>zero<br>nine</div>
<div class="starring">Starring</div>

接下来是-您不要在CSS部分中结束动画

@keyframes turn { 
0%{transform:rotate(1400deg);
    width: 1px} 
30%{transform:rotatex(7000deg);  
    font-size: 30px;} 
40% {transform:rotatez(360deg); 
    width: 13em} 
70% {width: 10em;}100%
   {opacity: 0.9;}

在这里，您需要最后一个}才能实际包装turn标签。

像这样：

@keyframes turn { 
0%{transform:rotate(1400deg);
    width: 1px} 
30%{transform:rotatex(7000deg);  
    font-size: 30px;} 
40% {transform:rotatez(360deg); 
    width: 13em} 
70% {width: 10em;}100%
   {opacity: 0.9;}
 }

进行这些更改，即可按预期工作。

.starring {
 color:red;

}

为我工作。

Answer 2

问题是您缺少}关键帧的结尾turn。

@keyframes turn {
  0% {
    transform:rotate(1400deg);
    width: 1px
  }
  30% {
    transform: rotatex(7000deg);
    font-size: 30px;
  } 
  40% {
    transform: rotatez(360deg); 
    width: 13em
  } 
  70% {
    width: 10em;
  }
  100% {
    opacity: 0.9;
  }
}

然后在您的第二个div上将起作用：

.starring {
    margin-top: 500px !important; 
    font-size: 50px !important;
}

Answer 3

我觉得最好的解决方案是将CSS赋予1个元素。

将position：absolute添加到元素的1。并进一步相应地使用margin-bottom和margin-left来调整元素。

如何阻止两个因素相互影响？

3 个答案: