jquery实现一个层叠堆积图文卡片切换幻灯片效果代码-html代码-BFW代码库

jquery实现一个层叠堆积图文卡片切换幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：jquery实现一个层叠堆积图文卡片切换幻灯片效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
        
        #backup{
          display:none;
        }
        
        body {
          background-image: linear-gradient(to bottom, #b1f7e3, #727991, #7f4fca);
          color: #333;
          font-family: Nunito, sans-serif;
          line-height: 2em;
          min-height: 100vh;
          padding: 100px;
          transition: height 5s;
        }
        
        h1 {
          border-bottom: 1px solid #fcfcfc;
          color: #fcfcfc;
          display: inline-block;
          margin-right: 80px;
          max-width: 200px;
          padding: 10px;
          text-transform: uppercase;
          text-shadow: 1px 1px 2px #727991;
          vertical-align: middle;
          position:relative;
        }
        
        h1 .limit-error{
          font-size: .5em;
          font-weight: normal;
          line-height: 1em;
          text-transform: none;
          
          position:absolute;
          left:0;
          bottom:-75px;
          width:100%;
          opacity:0;
          transition:all .2s;
        }
        
        h1 .limit-error.show{
          opacity:1;
        }
        
        nav {
          display: inline-block;
          margin-top: -50px;
          vertical-align: middle;
          width: 100%;
        }
        
        nav button {
          background: white;
          border: 2px solid white;
          border-radius: 100%;
          box-sizing: border-box;
          color: #7f4fca;
          display: inline-block;
          font-size: 16px;
          line-height: 38px;
          margin: 5px 10px;
          padding: 0 5px;
          height: 40px;
          width: 40px;
          opacity: 0.8;
          text-align: center;
        
          transition: all 0.2s;
        }
        
        nav button:hover,
        nav button:focus {
          border-color: #b1f7e3;
          cursor: pointer;
          opacity: 1;
        }
        
        nav button[disabled],
        nav button[disabled]:hover {
          background: #afafaf;
          border-color: #afafaf;
          cursor: default;
          filter: grayscale(1);
          opacity: 0.8;
        }
        
        #articles {
          display: inline-block;
          list-style: none;
          padding: 0;
          max-height: 0;
          overflow: hidden;
          position: relative;
        
          perspective: 1000px;
          perspective-origin: 50% -50%;
        
          height: 500px;
          width: 300px;
        
          transition:.........完整代码请登录后点击上方下载按钮下载查看