lodash实现分步骤引导提示效果代码-html代码-BFW代码库

lodash实现分步骤引导提示效果代码

代码语言：html

代码描述：lodash实现分步骤引导提示效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body,html {
    	padding:0;
    	margin:0;
    	background:#F7F8FA;
    	font-family:'Lato',sans-serif;
    	color:#676767;
    }
    .wrapper {
    	position:relative;
    	max-width:1080px;
    	margin:50px auto;
    }
    .wizard {
    	max-width:620px;
    	margin:0 auto;
    }
    .wizard__header {
    	position:relative;
    	color:#FFF;
    	padding:50px;
    	border-radius:5px;
    	border-bottom-left-radius:0;
    	border-bottom-right-radius:0;
    	text-align:center;
    	height:100px;
    	background:url("//repo.bfw.wiki/bfwrepo/image/61cc6f12e4ddb.png");
    	background-color:#4D637B;
    	background-position:center;
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .wizard__header-content {
    	position:absolute;
    	width:100%;
    	padding:0 50px;
    	text-align:center;
    	top:50%;
    	left:50%;
    	transform:translate(-50%,-60%);
    }
    .wizard__header-overlay {
    	position:absolute;
    	width:100%;
    	height:100%;
    	top:0;
    	left:0;
    	background:rgba(77,99,123,0.6);
    	border-top-left-radius:5px;
    	border-top-right-radius:5px;
    }
    .wizard__title {
    	font-size:1.5rem;
    	line-height:2rem;
    	margin:0;
    }
    .wizard__subheading {
    	text-transform:uppercase;
    	margin:0;
    	font-size:.8rem;
    	font-weight:100;
    	letter-spacing:2px;
    }
    .wizard__subheading span {
    	font-weight:600;
    }
    .wizard__steps {
    	position:absolute;
    	bottom:0;
    	left:0;
    	width:100%;
    	transform:translateY(50%);
    	z-index:10;
    }
    .wizard__footer {
    	padding:0 50px 50px;
    	border-radius:5px;
    }
    .wizard__content {
    	background:#FFF;
    	box-shadow:0px 0px 10px #c5c5c5;
    	border-radius:5px;
    }
    .wizard__congrats-message {
    	color:#676767;
    	text-align:center;
    	position:absolute;
    	top:50%;
    	left:50%;
    	transform:translate(-50%,-50%);
    	opacity:0;
    }
    .wizard.completed .wizard__content {
    	animation:gettingOut 2s cubic-bezier(1,-0.71,1,1.16) forwards;
    }
    .wizard.completed .wizard__congrats-message {
    	animation:fadeIn 2s cubic-bezier(1,-0.71,1,1.16) forwards;
    }
    .line {
    	position:absolute;
    	top:20px;
    	left:50%;
    	z-index:-1;
    	height:6px;
    	transition:all 0.5s ease;
    }
    .line.-start {
    	left:0%;
    	background:#5094de;
    	width:50%;
    }
    .line.-end {
    	left:50%;
    	background:#5094de;
    	width:50%;
    }
    .line.-background {
    	background:#c3c3c3;
    	width:100%;
    }
    .line.-progress {
    	background:#5094de;
    	width:100%;
    	transform:scaleX(0);
    	transform-origin:left center;
    }
    .line.-in-progress {
    	transform:scaleX(1);
    }
    .panels {
    	position:relative;
    	overflow:hidden;
    }
    .panel {
    	position:absolute;
    	top:0;
    	l.........完整代码请登录后点击上方下载按钮下载查看