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-gallery__image.s--prev-right {
      transform-origin: 100% 100%;
      transform: rotate(5deg) translate3d(50%, 30%, 0);
    }
    .distorted-gallery__image.s--active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: transform 640ms 160ms cubic-bezier(0.97, 0.13, 0.34, 1.15), opacity 320ms 160ms ease-in;
    }
    .distorted-gallery.s--no-transition .distorted-gallery__image {
      transition: all 0s 0s;
    }
    .distorted-gallery__control {
      z-index: 100;
      position: absolute;
      left: 50px;
      top: 50%;
      width: 50px;
      height: 50px;
      margin-top: -25px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
    }
    .distorted-gallery__control:before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      margin-left: -10px;
      margin-top: -10px;
      border: 2px solid #000;
      border-bottom: none;
      border-right: none;
      transform: translateX(5px) rotate(-45deg);
    }
    .distorted-gallery__control--right {
      left: auto;
      right: 50px;
    }
    .distorted-gallery__control--right:before {
      transform: translateX(-5px) rotate(135deg);
    }
    
    .footer-link {
      z-index: 100;
      position: absolute;
      left: 5px;
      bottom: 5px;
      font-size: 16px;
      color: #fff;
    }
    .footer-link img {
      width: 32px;
      vertical-align: top;
    }
    .footer-link--twitter {
      left: auto;
      right: 5px;
    }
    </style>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script>

    <script>
        !function() {
        "use strict";
        var i = {}.hasOwnProperty;
        function a() {
            for (var e = [], n = 0; n < arguments.length; n++) {
                var r = arguments[n];
                if (r) {
                    var t = typeof r;
                    if ("string" === t || "number" === t)
                        e.push(r);
                    else if (Array.isArray(r) && r.length) {
                        var f = a.apply(null, r);
                        f && e.push(f)
                    } else if ("object" === t)
                        for (var o in r)
                            i.call(r, o) && r[o] && e.push(o)
                }
            }
            return e.join(" ")
        }
        "undefined" != typeof module && module.exports ? (a.default = a,
        module.exports = a) : "function" == typeof define && "object" == typeof define.amd && define.amd ? define("classnames", [], function() {
            return a
        }) : window.classNames = a
    }();
    
            function _defineProperty(obj, key, value) {if.........完整代码请登录后点击上方下载按钮下载查看