css左右切换动画效果代码

CSS 左右切换动画效果是网页设计中常用的一种动态效果，可以让网页更加生动有趣。下面为大家介绍一些基本的 CSS 左右切换动画效果代码。首先，在 HTML 文件中需要添加一些基本的结构，代码如下：

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

其中，container 是容器，用于居中显示，Box 是需要进行动画效果的元素。接下来，给容器添加一些基本的样式，代码如下：

css左右切换动画效果代码

  .container {
      width: 800px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
  }

其中，width 即为容器的宽度，margin 为自动居中， position: relative 是为了让绝对定位元素相对于该容器而不是整个页面进行位置调整， overflow: hidden 是为了隐藏滑动到容器外部的元素。给 Box 元素添加一些基本的样式，代码如下：

  .Box {
      position: absolute;
      top: 0;
      left: 0;
      width: 800px;
      height: 400px;
      z-index: 1;
      transition: all .5s ease-in-out;
  }

其中，position: absolute 是为了让元素脱离文档流并相对于父元素进行位置的调整， top 和 left 属性控制元素的位置， width 和 height 分别是元素的宽度和高度， z-index 是为了控制元素的叠放顺序， transition 是用来设置过渡动画效果的。接着，需要添加一些 JS 代码，实现左右切换效果。代码如下：

  var container = document.querySelector('.container');
  var Box = document.querySelector('.Box');
  
  container.addEventListener('mousemove',function(e) {
      var x = e.clientX - this.offsetLeft;
      var y = e.clientY - this.offsetTop;
  
      var midX = this.offsetWidth / 2;
  
      var newX = (x - midX) / 10;
  
      Box.style.transform = 'perspective(500px) rotateY(' + newX + 'deg)';
  });

其中，container 和 Box 分别是容器和需要进行动画效果的元素。addEventListener 是添加事件监听器，后面接着的是鼠标移动事件，通过 event.clientX 和 event.clientY 获取鼠标的位置， midX 是容器宽度的一半， newX 是根据鼠标位置计算出来的新的值，perspective 就是指添加了一个透视的3D方式，效果更佳。最后，给 Box 元素添加一些动画效果，代码如下：

  .Box:hover {
      transform: perspective(500px) rotateY(-10deg);
  }

这里是鼠标悬浮时的效果，rotateY是基于Y轴进行旋转，-10deg是具体的旋转角度。以上就是 CSS 左右切换动画效果的基本代码，希望对大家有所帮助。

css左右切换动画效果代码

相关推荐