css实现翻书图片轮换过渡效果代码-html代码-BFW代码库

css实现翻书图片轮换过渡效果代码

代码语言：html

所属分类：幻灯片

代码描述：css实现翻书图片轮换过渡效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">




    <style>
        :root {
          --duration: 500ms;  
          --ease-in: cubic-bezier(0.85, 0, 1, 1);
          --ease-out: cubic-bezier(0, 0, 0.3, 1);
          --ease-in-out: ease-in-out;
          --image-current: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png);
          --image-next: url(//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png);
        }
        
        html, body, section {
          height: 100%;
        }
        
        @-webkit-keyframes zoom-1 {
          0%, 100% { transform: scale(0.8); }
          50% { transform: scale(0.75); box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); }
        }
        
        @keyframes zoom-1 {
          0%, 100% { transform: scale(0.8); }
          50% { transform: scale(0.75); box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); }
        }
        @-webkit-keyframes zoom-2 {
          0%, 100% { transform: scale(0.8); }
          50% { transform: scale(0.75); box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); }
        }
        @keyframes zoom-2 {
          0%, 100% { transform: scale(0.8); }
          50% { transform: scale(0.75); box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); }
        }
        
        section {
          -webkit-animation: zoom-1 calc(var(--duration) * 2) var(--ease-in-out);
                  animation: zoom-1 calc(var(--duration) * 2) var(--ease-in-out);
          border-radius: 1vh;
          box-shadow: 0 2vh 4vh rgba(0, 0, 0, 0.2);
          display: flex;
          perspective: 2000px;
          position: reltive;
          transform: scale(0.8);
          width: 100%;
        }
        
        /* duplicating the animation to get it to fire again */
        section.flip {
          -webkit-animation: zoom-2 calc(var(--duration) * 2) var(--ease-in-out);
                  animation: zoom-2 calc(var(--duration) * 2) var(--ease-in-out);
        }
        
        .left,
        .right {
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          background-attachment: fixed;
          background-position: center center;
          background-size: cover;
          height: 100%;
          position: absolute;
          t.........完整代码请登录后点击上方下载按钮下载查看