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.........完整代码请登录后点击上方下载按钮下载查看