形状转换:目标

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;
}

但我希望同样的小圆圈变成蓝调，以及按另一个按钮。

Answer 1

这是可以做到的。但它需要在HTML中嵌套，如下面的代码所示。请不要使用这种方法，如果您需要使用相同的div来转换超过两到三次，因为标记会变得过于混乱。基本上，我们在这里所做的是：

1. 要转换的元素是div，类作为box。但是，如何以及将其转换为什么取决于单击的链接和相关的目标。
2. 单击第一个链接时，目标是具有Yellowcircle的最外层的Yellowcircle。根据CSS，当box是target时，类Yellowcircle的元素将被转换为黄色的圆圈。
3. 当点击第二个链接时，Bluesquare div就变成了target，并且按照本例中的target，box应该变成一个蓝色的方块。
4. 最后，当单击第三个链接时，目标是一般的#，因此将应用默认的.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>

​