CSS中的視口周圍的彈跳元素

此僅CSS動畫會產生彈跳的元素效果，模仿屏幕保護程序或PONG遊戲。關鍵是使用視口單元（ vw和vh ）和calc()動態確定瀏覽器窗口中元素的運動，無論其大小如何。動畫將X和Y軸巧妙地分為父母和子元素上的單獨動畫，從而可以獨立的方向逆轉和更自然的反彈。

原始代碼使用兩個嵌套divs：父母和一個孩子。父母處理水平運動，而孩子處理垂直運動。這允許獨立控制X和Y彈跳。

這是代碼的細分：

HTML結構：

<div class="container">
  <div class="bouncer"></div>
</div>

CSS樣式：

CSS利用自定義屬性（變量）來更好地控制和可讀性：

 ：根 {
   - 寬度：100px; / *彈跳元件的大小 */
  -x速：13秒； / *水平動畫速度 */
   -  Y速：7； / *垂直動畫速度 */
   - 速度：2.2s; / *平滑彈跳的過渡速度 */
}

.Container { / *水平運動的父元素 * /
  動畫：x var（ -  x速）線性無限替代；
}

.bouncer { / *垂直運動的子元素 * /
  寬度：var（ - 寬度）;
  高度：var（ - 寬度）;
  背景色：＃007BFF; / *示例顏色 */
  邊界拉迪烏斯：50％； / *使它成為一個圓圈 */
  動畫：y var（ -  y速）線性無限替代；
  / *添加更順暢的反彈的過渡 */
  過渡：變換var（ - 過渡速度）易於進出；
}

@keyframes x {
  100％{
    變換：translatex（calc（100vw-var（-varth）））;
  }
}

@keyframes y {
  100％{
    轉換：translatey（calc（100VH-var（-varth）））;
  }
} 

這種方法避免了對JavaScript的需求，使代碼簡潔有效。 animation屬性中的alternate關鍵字會自動逆轉動畫方向，從而產生彈跳效果。 calc()函數可確保元素彈跳到視口的邊緣，並動態調整到不同的屏幕尺寸。在.bouncer類上的transition屬性增加了反彈方向之間的更平滑的過渡。調整--x-speed ， --y-speed和--width變量允許自定義動畫的速度和尺寸。

以上是CSS中的視口周圍的彈跳元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！