Question

如何通过点击超链接将:target 1个红色小方框transition变为黄色圆圈，然后将同一个小方框转换为蓝色方块？

这是我的红色小方块的CSS：

#Redsquare{    
    height: 15px;    
    width: 15px;    
    background-color: rgb(255,0,0);    
    position: absolute;    
    top: 330px;    
    left: 640px;    
    transition: all 0.5s linear;    
}

以下是将#Redsquare定位到黄色圆圈的代码。

#Redsquare:target{    
    height: 300px;    
    width: 300px;    
    border-radius: 50%;    
    background-color: rgb(255,255,0);    
    top: 200px;    
    left: 500px;
}

但我希望同样的小圆圈也可以通过按下另一个按钮转换成Bluesquare。

Answer 1

这可以做到。但它需要在HTML中嵌套，如下面的代码所示。如果您需要将div转换为超过两次或三次，那么不要使用此方法，因为标记会变得太乱。基本上我们在这里做的事情如下：

要转换的元素是div，类为box。但是它将如何以及将被转换为什么取决于所点击的链接和相关目标。
点击第一个链接时，最外面的div Yellowcircle是目标。根据CSS，当box为target时，类Yellowcircle的元素将转换为黄色圆圈。
点击第二个链接后，Bluesquare div成为target，在这种情况下，根据CSS，box应该变为蓝色方块。
最后，当点击第3个链接时，目标是普通#，因此将应用默认的.box CSS样式，它将变回红色方块。

还有其他选择，但它们涉及JavaScript。

.box {
  height: 150px;
  width: 150px;
  background-color: rgb(255, 0, 0);
  transition: all 0.5s linear;
}
#Yellowcircle:target .box {
  border-radius: 50%;
  background-color: rgb(255, 255, 0);
}
#Bluesquare:target .box {
  background-color: rgb(0, 0, 255);
}

/* Just for demo */

a {
  position: relative;
  margin: 0px 4px;
  text-decoration: none;
  font-family: Calibri;
  font-variant: small-caps;
  color: crimson;
}
a:after {
  position: absolute;
  content: "|";
  padding: 0px 4px;
}
a:last-of-type:after {
  display: none;
}

<div id='Yellowcircle'>
  <div id='Bluesquare'>
    <div class='box'>
    </div>
  </div>
</div>

<a href='#Yellowcircle'>Transform to yellow circle</a>
<a href='#Bluesquare'>Transform to blue square</a>
<a href='#'>Go back to default</a>

这就是我所说的标记在需要转换为3个以上的形状时变得混乱的意思。请注意我们如何为每个需要的额外形状引入额外的级别。

.box {
  height: 150px;
  width: 150px;
  background-color: rgb(255, 0, 0);
  transition: all 0.5s linear;
}
#Yellowcircle:target .box {
  border-radius: 50%;
  background-color: rgb(255, 255, 0);
}
#Bluesquare:target .box {
  background-color: rgb(0, 0, 255);
}
#Greenoval:target .box {
  border-radius: 75px 100px;
  background-color: rgb(0, 255, 0);
}
/* Just for demo */

a {
  position: relative;
  margin: 0px 4px;
  text-decoration: none;
  font-family: Calibri;
  font-variant: small-caps;
  color: crimson;
}
a:after {
  position: absolute;
  content: "|";
  padding: 0px 4px;
}
a:last-of-type:after {
  display: none;
}

<div id='Yellowcircle'>
  <div id='Bluesquare'>
    <div id='Greenoval'> <!-- notice how for each shape we need to add an extra level -->
      <div class='box'>
      </div>
    </div>
  </div>
</div>

<a href='#Yellowcircle'>Transform to yellow circle</a>
<a href='#Bluesquare'>Transform to blue square</a>
<a href='#Greenoval'>Transform to green oval</a>
<a href='#'>Go back to default</a>

形状过渡：目标

1 个答案: