jquery+css实现开始页卡片式图文介绍轮播图效果代码-html代码-BFW代码库

jquery+css实现开始页卡片式图文介绍轮播图效果代码

代码语言：html

所属分类：幻灯片

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