Question

每当我们点击图中的播放按钮（由给定代码生成）时，
所有分区的颜色必须连续变化，所有分区的大小必须是原来的两倍我想使用仅限CSS 来解决这个问题，没有JavaScript 请一些人帮我用CSS解决它。

代码： -

<html>

<head>
  <title>Question 3</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0
  }
  #second {
    position: relative;
    width: 100px;
    height: 100px;
    border-top-left-radius: 100px 100px;
    background: lightblue;
  }
  #first {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
    border-top-right-radius: 100px 100px;
    background: red;
  }
  #fourth {
    position: relative;
    left: 100px;
    width: 100px;
    height: 100px;
    border-bottom-right-radius: 100px 100px;
    background: yellow;
  }
  #third {
    position: absolute;
    width: 100px;
    height: 100px;
    border-bottom-left-radius: 100px 100px;
    background: orange;
  }
  figure {
    height: 200px;
    position: relative;
    top: -125px;
    left: 75px;
  }
  figure button[name="play_button"] {
    width: 50px;
    height: 50px;
    background: black;
    border-radius: 100%;
    cursor: pointer;
  }
  figure button[name="play_button"]:focus {
    border: 0px;
  }
  figure button[name="play_button"]::after {
    content: '';
    display: inline-block;
    position: relative;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    top: 1px;
    left: 3px;
    border-color: transparent transparent transparent lightblue;
  }
</style>

<body>
  <div id="main">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth"></div>
  </div>
  <figure>
    <button name="play_button"></button>
  </figure>
</body>

</html>

Answer 1

在语义上它没有意义，但是通过使用伪选择器input:checked ~ div，您可以选择输入后的兄弟姐妹，并且在没有任何触发Javascript的情况下应用CSS。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100px;
  height: 100px;
  -webkit-transition: .3s all ease;
          transition: .3s all ease;
}

div:nth-of-type(even) {
  position: relative;
}

div:nth-of-type(odd) {
  position: absolute;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

div:nth-of-type(1) {
  border-top-right-radius: 100%;
  background: red;
}

div:nth-of-type(2) {
  border-top-left-radius: 100%;
  background: lightblue;
}

div:nth-of-type(3) {
  border-bottom-right-radius: 100%;
  background: orange;
}

div:nth-of-type(4) {
  border-bottom-left-radius: 100%;
  background: yellow;
}

input {
  position: absolute;
  left: 75px;
  top: 75px;
  width: 50px;
  height: 50px;
  z-index: 2;
  -webkit-transition: .3s all ease;
          transition: .3s all ease;
}

input::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background: black;
  border-radius: 100%;
  cursor: pointer;
}

input::after {
  content: '';
  display: block;
  position: absolute;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  top: 14px;
  left: 18px;
  border-color: transparent transparent transparent lightblue;
  cursor: pointer;
}

input:checked {
  left: 175px;
  top: 175px;
}

input:checked ~ div {
  width: 200px;
  height: 200px;
}

input:checked ~ div {
  -webkit-animation-name: color1;
          animation-name: color1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

input:checked ~ div:nth-of-type(1) {
  -webkit-animation-name: color1;
          animation-name: color1;
}

input:checked ~ div:nth-of-type(2) {
  -webkit-animation-name: color2;
          animation-name: color2;
}

input:checked ~ div:nth-of-type(3) {
  -webkit-animation-name: color3;
          animation-name: color3;
}

input:checked ~ div:nth-of-type(4) {
  -webkit-animation-name: color4;
          animation-name: color4;
}

@-webkit-keyframes color1 {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}

@keyframes color1 {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}
@-webkit-keyframes color2 {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: yellow;
  }
}
@keyframes color2 {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: yellow;
  }
}
@-webkit-keyframes color3 {
  0% {
    background-color: lightblue;
  }
  50% {
    background-color: orange;
  }
  100% {
    background-color: lightblue;
  }
}
@keyframes color3 {
  0% {
    background-color: lightblue;
  }
  50% {
    background-color: orange;
  }
  100% {
    background-color: lightblue;
  }
}
@-webkit-keyframes color4 {
  0% {
    background-color: orange;
  }
  50% {
    background-color: lightblue;
  }
  100% {
    background-color: orange;
  }
}
@keyframes color4 {
  0% {
    background-color: orange;
  }
  50% {
    background-color: lightblue;
  }
  100% {
    background-color: orange;
  }
}

＆＃13;

<input type="checkbox">
<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

在css中：按下按钮时，必须更改div的颜色和大小

1 个答案: