react图片飞入淡出淡入幻灯片效果代码-html代码-BFW代码库

react图片飞入淡出淡入幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：react图片飞入淡出淡入幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">
    <style>
        *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "Roboto", Helvetica, Arial, sans-serif;
      background: #000;
    }
    
    .distorted-gallery {
      --transition-time: 800;
      overflow: hidden;
      position: relative;
      height: 100vh;
      perspective: 1000px;
      transform-style: preserve-3d;
    }
    .distorted-gallery__image {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 46.6666666667vh;
      height: 70vh;
      margin-left: -23.3333333333vh;
      margin-top: -35vh;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: 50% 50%;
         object-position: 50% 50%;
      opacity: 0;
      transition-timing-function: ease-in-out;
      will-change: transform, opacity;
    }
    .distorted-gallery__image.s--left {
      transform-origin: 0 50%;
      transform: rotateX(-8deg) rotateY(-35deg) translate3d(-170%, 0, -30px) scale(2, 0.7);
    }
    .distorted-gallery__image.s--right {
      transform-origin: 100% 50%;
      transform: rotateX(8deg) rotateY(35deg) translate3d(170%, 0, -30px) scale(2, 0.7);
    }
    .distorted-gallery__image.s--prev {
      opacity: 0;
      transition: all 560ms;
    }
    .distorted-gallery__image.s--prev-left {
      transform-origin: 0 100%;
      transform: rotate(-5deg) translate3d(-50%, 30%, 0);
    }
    .distorted-galle.........完整代码请登录后点击上方下载按钮下载查看