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中文网其他相关文章！