色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我注意到html css動畫的一個小細節.什么& # 39；原因是什么？

CSS
劉柏宏2年前8瀏覽0評論

我想做一個簡單的技巧，只用html和css。我只是更換了按鈕，但只有第一個按鈕工作。我必須使用js i?f嗎？我想像第二個那樣做？或者有沒有沒有Js的解決方案？我想知道是什么引起的。i?s:關于HTML渲染？除了使用Js之外，我可以實現另一種方法來解決這個問題嗎(按鈕在容器下面)...

第一個(成功了...)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equi="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    body {
      height: 100vh;
    }
    
    .container {
      margin: 50px auto;
      width: 500px;
      height: 500px;
      border: 1px solid black;
    }
    
    .content {
      width: 100px;
      height: 150px;
      background-color: aqua;
      animation: animasyon 1.5s linear alternate infinite;
    }
    
    .start:focus~.container .content {
      animation-play-state: running;
    }
    
    .stop:focus~.container .content {
      animation-play-state: paused;
    }
    
    @keyframes animasyon {
      from {
        width: 100px;
      }
      to {
        width: 500px;
      }
    }
  </style>
</head>

<body>
  <button class="start">Start</button>
  <button class="stop">Stop</button>
  <div class="container">
    <div class="content"></div>
  </div>
</body>

</html>

常規同級選擇器不選擇元素之前的同級，只選擇元素之后的同級。你的按鈕在一個不起作用的按鈕的后面。

如果您想在之后處理它，您需要使用一個父類并使用:has()

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.container {
  margin: 50px auto;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.content {
  width: 100px;
  height: 150px;
  background-color: aqua;
  animation: animasyon 1.5s linear alternate infinite;
}

.wrapper:has(.start:focus) > .container .content {
  animation-play-state: running;
}

.wrapper:has(.stop:focus) > .container .content {
  animation-play-state: paused;
}

@keyframes animasyon {
  from {
    width: 100px;
  }
  to {
    width: 500px;
  }
}

<div class="wrapper">
  <div class="container">
    <div class="content"></div>
  </div>
  <button class="start">Start</button>
  <button class="stop">Stop</button>
</div>

同級選擇器不選擇元素之前的同級，只選擇元素之后的同級。所以需要在HTML中保持順序，但是可以使用flex的CSS來改變順序。

<!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta http-equi="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        
        body {
          height: 100vh;
        }
        
        .container {
          margin: 50px auto;
          width: 500px;
          height: 500px;
          border: 1px solid black;
        }
        
        .content {
          width: 100px;
          height: 150px;
          background-color: aqua;
          animation: animasyon 1.5s linear alternate infinite;
        }
        
        .start:focus~.container-wrapper .content {
          animation-play-state: running;
        }
        
        .stop:focus~.container-wrapper .content {
          animation-play-state: paused;
        }
        
        @keyframes animasyon {
          from {
            width: 100px;
          }
          to {
            width: 500px;
          }
        }
        body {
          display: flex;
          flex-wrap: wrap;
        }
        .container-wrapper {
          width: 100%;
          order: -1;
        }
        .start {
          margin-right: 5px;
        }
      </style>
    </head>

    <body>
      <button class="start">Start</button>
      <button class="stop">Stop</button>
      <div class="container-wrapper">
        <div class="container">
          <div class="content"></div>
        </div>
      </div>
    </body>

    </html>

正如每個人都提到的，你的問題是關于結構。

您可以使用標簽和隱藏的單選按鈕。 讓無線電在流程中保持領先，將鏈接標簽放在文檔中您需要的任何地方，它們將觸發無線電。

閱讀for屬性以了解其工作原理:

https://developer . Mozilla . org/en-US/docs/Web/HTML/Attributes/for

for屬性是& lt標簽& gt并且& lt輸出& gt。當在& lt標簽& gt它指示此標簽描述的表單元素。當在& lt輸出& gt元素它允許表示輸出中使用的值的元素之間的顯式關系。

可能的例子點擊開始運行動畫和停止暫停。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.container {
  margin: 50px auto;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.content {
  width: 100px;
  height: 150px;
  background-color: aqua;
  animation: animasyon 1.5s linear alternate infinite;
}
/* hide radios */
#start,
#stop {
  position: fixed;
  margin-inline-start: -100vw;
}
/* make label look alike button */
[for="start"],
[for="stop"] {
  display: inline-block;
  background: silver;
  padding: 0.25em 0.5em 0.1em;
  border-radius: 5px;
  border: outset 1px;
}

[for="start"]:active,
[for="stop"]:active {
  border: inset 1px;
}

#start:checked~.container .content {
  animation-play-state: running;
}

#stop:checked~.container .content {
  animation-play-state: paused;
}

@keyframes animasyon {
  from {
    width: 100px;
  }
  to {
    width: 500px;
  }
}

<input type="radio" name="anime" id="start"> <input type="radio" name="anime" id="stop">
<div class="container">
  <div class="content"></div>
</div>
<label for="start" class="start">Start</label>
<label for="stop" class="stop">Stop</label>

將按鈕放在。容器將使一般的兄弟組合符(~)無效。創建一個信封并將按鈕放在里面怎么樣？這樣一來。容器仍然是按鈕的同級。

類似于(為了在代碼片段運行框中更好地顯示，做了一些修改):

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  padding: 1rem;
}

.envelope {
  text-align: center;
  height: 180px;
  width: 300px;
  border: 1px dotted #999;
}

.envelope button {
  top: 75%;
  position: relative;
}

.container {
  margin: 20px auto;
  width: 200px;
  height: 80px;
  border: 1px solid black;
}

.content {
  width: 100px;
  height: 40px;
  animation: animasyon 1.5s linear alternate infinite;
}

div .stop:hover~.container .content {
  animation-play-state: paused;
}

@keyframes animasyon {
  from {
    background-color: red;
    width: 0px;
  }
  to {
    width: 200px;
    background-color: green;
  }
}

<div class="envelope">
  <button class="stop">Stop</button>
  <div class="container">
    <div class="content"></div>
  </div>
</div>