Переход формы с помощью :target

Как :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;
}

Но я хочу, чтобы тот же маленький кружок превратился в синий квадрат, нажав другую кнопку.


html css css-selectors css-shapes
person Community    schedule 26.09.2013    source источник
comment
Извини друг. Я новичок здесь и в CSS, поэтому я не знаю, как это сделать.   -  person    schedule 26.09.2013
comment
Привет! Во-первых, это маленький красный квадрат размером 20 пикселей. У меня есть 3 гиперссылки. 1. Желтый круг 2. Синий квадрат 3. По умолчанию (красный) Как сделать красный круг желтым, щелкнув гиперссылку для этого, и как сделать то же самое, щелкнув гиперссылку для синего квадрата?   -  person    schedule 26.09.2013
comment
Надеюсь, вы понимаете, что я имею в виду.   -  person    schedule 26.09.2013
comment
Да мой друг. Этот работал очень хорошо, но я тупой и не мог заставить его работать в моем проекте :(   -  person    schedule 26.09.2013

Ответы (1)


arrow_upward
2
arrow_downward

Это можно сделать. Но для этого требуется вложение в HTML, как показано в коде ниже. Пожалуйста, не используйте этот подход, если вам нужно преобразовать один и тот же div более двух или трех раз, так как разметка станет слишком беспорядочной. В основном то, что мы делаем здесь, выглядит следующим образом:

  1. Элемент, который будет преобразован, — это div с классом box. Но то, как и во что он будет преобразован, зависит от ссылки, по которой щелкнули, и связанной с ней цели.
  2. Когда нажимается 1-я ссылка, целью становится крайний div с Yellowcircle. Согласно CSS, элемент с классом box будет преобразован в желтый круг, когда target равен Yellowcircle.
  3. Когда нажимается вторая ссылка, div Bluesquare становится target, и в соответствии с CSS в этом случае box должен стать синим квадратом.
  4. Наконец, когда нажата третья ссылка, целью является общий #, поэтому будет применен стиль CSS по умолчанию .box, и он снова станет красным квадратом.

Есть и другие альтернативы, но они включают 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>

person Harry    schedule 26.09.2013