jquery+css实现开始页卡片式图文介绍轮播图效果代码
代码语言：html
所属分类：幻灯片
代码描述：jquery+css实现开始页卡片式图文介绍轮播图效果代码
代码标签： jquery css 开始页 卡片式 图文 介绍 轮播图
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome.3.2.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
body{color:white;font-family:"Lato";font-weight:light;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(150deg,#e6d3f9 0,#e6d3f9 50%,#cea0f1 50%,#cea0f1 100%)}.open-walkthrough{border:0;background:#5da3f2;font-weight:bold;text-transform:uppercase;letter-spacing:.15em;font-size:12px;height:40px;width:120px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-60px}.walkthrough{box-shadow:0 6px 12px rgba(0,0,0,0.23),0 10px 40px rgba(0,0,0,0.19);background:linear-gradient(to right bottom,#9e66c6,#6027e1);border-radius:0;display:none;flex-direction:column;flex:0 0 auto;font-size:14px;height:464px;overflow:hidden;transition:opacity .4s cubic-bezier(0.25,0.8,0.25,1),transform .4s cubic-bezier(0.25,0.8,0.25,1),box-shadow .4s cubic-bezier(0.25,0.8,0.25,1);width:280px;z-index:1000}.walkthrough.show{display:flex;opacity:0;transform:translateY(72px)}.walkthrough.reveal{opacity:1;transform:translateY(0)}.walkthrough .walkthrough-body{align-items:center;display:flex;flex:1;text-align:center}.walkthrough .walkthrough-body .prev-screen,.walkthrough .walkthrough-body .next-screen{align-self:stretch;background:0;border:0;margin-top:40px;color:rgba(255,255,255,0.25);cursor:pointer;flex:0 0 auto;font-size:24px;opacity:1;outline:0;padding:16px;transform:scale(1);transition:transform .4s cubic-bezier(0.25,0.8,0.25,1),color .4s cubic-bezier(0.25,0.8,0.25,1),opacity .4s cubic-bezier(0.25,0.8,0.25,1);z-index:1000}.walkthrough .walkthrough-body .prev-screen:hover,.walkthrough .walkthrough-body .prev-screen:active,.walkthrough .walkthrough-body .next-screen:hover,.walkthrough .walkthrough-body .next-screen:active{color:white;transform-origin:center;transform:scale(1.25)}.walkthrough .walkthrough-body .prev-screen:disabled,.walkthrough .walkthrough-body .next-screen:disabled{opacity:0}.walkthrough .walkthrough-body .prev-screen{order:1}.walkthrough .walkthrough-body .next-screen{order:3}.walkthrough .walkthrough-body .screens{flex:1;align-self:stretch;position:relative;margin:0 -16px;padding:0;order:2}.walkthrough .walkthrough-body .screens .screen{position:absolute;list-style-type:none}.walkthrough .walkthrough-body .media{background:rgba(255,255,255,0.25);border-radius:132px;height:132px;margin:32px auto;width:132px}.walkthrough .walkthrough-body h3{font-size:15px;line-height:1.4em;text-transform:uppercase;letter-spacing:.15em}.walkthrough .walkthrough-body p{line-height:1.6em;font-size:13px;margin-top:16px;padding-top:0;color:rgba(255,255,255,0.8)}.walkthrough .walkthrough-pagination{align-items:center;display:flex;justify-content:center;margin-top:24px}.walkthrough .walkthrough-pagination .dot{background:rgba(0,0,0,0.25);border-radius:8px;height:8px;margin:0 4px;transform:scale(0.75);transition:transform .4s cubic-bezier(0.25,0.8,0.25,1),background .4s cubic-bezier(0.25,0.8,0.25,1);width:8px}.walkthrough .walkthrough-pagination .dot.active{background:white;transform:scale(1);transition-delay:.4s}.walkthrough .walkthrough-footer{display:flex;flex:0 0 auto;justify-content:space-around;padding:0}.walkthrough .walkthrough-footer button{height:40px;border:0;background:#5da3f2;font-weight:bold;text-transform:uppercase;letter-spacing:.15em;border-radius:0;color:white;flex:1;font-size:12px;margin:0;outline:0;padding:12px;transition:opacity .4s cubic-bezier(0.25,0.8,0.25,1),background .4s cubic-bezier(0.25,0.8,0.25,1);cursor:pointer}.walkthrough .walkthrough-footer button:hover{background:#6babf3}.walkthrough .walkthrough-footer button:active{background:#5da3f2}.walkthrough .walkthrough-footer button:disabled{cursor:pointer}.walkthrough .walkthrough-footer button.finish{background:#3e94f5;position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:scale(0,1);transform-origin:center;transition:opacity .4s cubic-bezier(0.25,0.8,0.25,1),background .4s cubic-bezier(0.25,0.8,0.25,1),transform .4s cubic-bezier(0.25,0.8,0.25,1)}.walkthrough .walkthrough-footer button.finish:hover{background:#4d9cf6}.walkthrough .walkthrough-footer button.finish:active{background:#3e94f5}.walkthrough .walkthrough-footer button.finish.active{transform:scale(1,1);opacity:1}.walkthrough .screens{margin:0}.walkthrough .screens .media .status-badge{left:136px;opacity:0;position:absolute;top:104px;transform:scale(0);transition:opacity .4s cubic-bezier(0.25,0.8,0.25,1),transform .4s cubic-bezier(0.25,0.8,0.25,1);transition-delay:.6s}.walkthrough .screens .media .status-badge i{display:inline}.walkthrough .screens .media.logo .logo{margin-top:20px;opacity:0;transform:translateY(-60px);transition:opacity .4s cubic-bezier(0.25,0.8,0.25,1),transform .4s cubic-bezier(0.25,0.8,0.25,1);width:80px}.walkthrough .screens .media .icon{position:absolute;opacity:0;transform:translateY(-30px);transition:opacity .4s cubic-bezier(0.25,0.8,0.25,1),transform .4s cubic-bezier(0.25,0.8,0.25,1);width:132px;left:48px;top:32px}.walkthrough .screens .media.bars .icon{transform:translate(40px,20px)}.walkthrough .screens .media.bars .icon:nth-of-type(2){transform:scale(0.25);transform-origin:30% 54%}.walkthrough .screens .media.bars .icon:nth-of-type(3){transform:scale(0.25);transform-origin:30% 40%}.walkthrough .screens .media.bars .icon:nth-of-type(4){transform:scale(0.25);transform-origin:30% 26%}.walkthrough .screens .media.files .icon{transform:translate(40px,20px)}.walkthrough .screens .media.comm .icon{transform:scale(0.25);transform-origin:29% 73%}.walkthrough .screens .media.comm .icon:nth-child(2){transform-origin:66% 85%}.walkthrough .screens .screen{opacity:0;position:absolute;transform:translateX(-72px);transition:all .4s cubic-bezier(0.25,0.8,0.25,1)}.walkthrough .screens .screen.active{opacity:1;transform:translateX(0) scale(1);transition-delay:.4s}.walkthrough .screens .screen.active ~ .screen{opacity:0;transform:translateX(72px)}.walkthrough .screens .screen.active .media .status-badge{opacity:1;transform:scale(1.75)}.walkthrough .screens .screen.active .media.logo .logo{opacity:.8;transform:translateY(0);transition-delay:.6s}.walkthrough .screens .screen.active .media.logo .status-badge{transition-delay:1s}.walkthrough .screens .screen.active .media.books .icon{opacity:1;transform:translateY(0);transition-delay:.6s}.walkthrough .screens .screen.active .media.books .icon:nth-child(2){transition-delay:.725s}.walkthrough .screens .screen.active .media.books .icon:nth-child(3){transition-delay:.85s}.walkthrough .screens .screen.active .media.books .status-badge{transition-delay:1.4s}.walkthrough .screens .screen.active .media.bars .icon{opacity:1;transform:translate(0) scale(1);transition-delay:.6s}.walkthrough .screens .screen.active .media.bars .icon:nth-child(2){transition-delay:1.05s}.walkthrough .screens .screen.active .media.bars .icon:nth-child(3){transition-delay:.925s}.walkthrough .screens .screen.active .media.bars .icon:nth-child(4){transition-delay:.8s}.walkthrough .screens .screen.active .media.files .icon{opacity:1;transform:translateY(0);transition-delay:.9s}.walkthrough .screens .screen.active .media.files .icon:nth-child(3){transition-delay:.8s}.walkthrough .screens .screen.active .media.files .icon:nth-child(2){transition-delay:.7s}.walkthrough .screens .screen.active .media.files .icon:nth-child(1){transition-delay:.6s}.walkthrough .screens .screen.active .media.files .status-badge{transition-delay:1.6s}.walkthrough .screens .screen.active .media.comm .icon{opacity:1;transform:scale(1);transition-delay:.6s}.walkthrough .screens .screen.active .media.comm .icon:nth-child(2){transition-delay:.8s}.walkthrough .screens .screen.active .media.comm .status-badge{transition-delay:1.6s}
</style>
</head>
<body>
<button class='open-walkthrough'>Start</button>
<div class='walkthrough show reveal'>
<div class='walkthrough-pagination'>
<a class='dot active'></a>
<a class='dot'></a>
<a class='dot'></a>
<a class.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0