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

代码语言：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;
    	left:0;
    	transition:.5s all;
    	padding:50px;
    }
    .panel__header {
    	margin-bottom:30px;
    }
    .panel__title {
    	font-size:1.5rem;
    	line-height:2rem;
    	margin:0;
    }
    .panel__subheading {
    	font-size:.9rem;
    	line-height:1.2rem;
    	margin:0;
    }
    .panel.movingOutBackward {
    	transform:translateX(-620px);
    }
    .panel.movingOutFoward {
    	transform:translateX(620px);
    }
    .panel.movingIn {
    	transform:translateX(0);
    }
    .steps {
    	position:relative;
    	display:flex;
    	flex:0 1 auto;
    	color:#fff;
    }
    .step {
    	flex-basis:0;
    	flex-grow:1;
    	max-width:100%;
    	box-sizing:border-box;
    	text-align:center;
    	border-radius:5px;
    }
    .step__content {
    	position:relative;
    	z-index:2;
    }
    .step__number {
    	font-size:1.3rem;
    	color:#676767;
    	background:#FFF;
    	font-weight:800;
    	width:40px;
    	height:40px;
    	line-height:40px;
    	margin:0 auto;
    	border-radius:50%;
    	border:5px solid #c3c3c3;
    	transition:opacity .5s;
    	opacity:1;
    	z-index:5;
    }
    .step.-completed .step__number {
    	opacity:0;
    }
    .step.-completed .checkmark {
    	z-index:0;
    	animation:fill .4s ease-in-out forwards,scale .3s ease-in-out .6s both;
    }
    .step.-completed .checkmark__check {
    	animation:stroke .5s linear .4s forwards;
    }
    .step.-completed .line {
    	transform:scaleX(1);
    }
    .step:last-child .line {
    	width:50%;
    }
    .checkmark {
    	position:absolute;
    	top:0;
    	left:50%;
    	transform:translateX(-50%);
    	width:50px;
    	height:50px;
    	border-radius:50%;
    	stroke-width:2;
    	stroke:#fff;
    	stroke-miterlimit:10;
    	box-shadow:inset 0px 0px 0px #75b2f5;
    	z-index:-1;
    }
    .checkmark__circle {
    	stroke-dasharray:166;
    	stroke-dashoffset:166;
    	stroke-width:8;
    	stroke-miterlimit:10;
    	stroke:#5094de;
    	fill:none;
    	animation:stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards;
    }
    .checkmark__check {
    	transform-origin:50% 50%;
    	stroke-dasharray:40;
    	stroke-dashoffset:40;
    	stroke:#FFF;
    	stroke-width:5;
    }
    .button {
    	cursor:pointer;
    	font-size:1rem;
    	line-height:1rem;
    	background:#5094de;
    	color:#FFF;
    	padding:10px 15px;
    	border:none;
    	outline:none;
    	display:inline-block;
    	transition:all .3s;
    }
    .button:hover {
    	background:#7baee6;
    }
    .button.previous {
    	margin-right:5px;
    }
    .button.disabled {
    	background:#c3c3c3;
    	cursor:default;
    }
    @keyframes stroke {
    	to {
    	stroke-dashoffset:0;
    }
    }@keyframes scale {
    	50% {
    	transform:translateX(-50%) scale3d(1.5,1.5,1.5);
    }
    100% {
    	transform:scale3d(0);
    }
    }@keyframes fill {
    	100% {
    	box-shadow:inset 0px 0px 0px 30px #75b2f5;
    }
    }@keyframes gettingOut {
    	0% {
    	transform:translateY(0%);
    }
    30% {
    	transform:translateY(100px);
    }
    100% {
    	transform:translateY(-200%);
    }
    }@keyframes fadeIn {
    	100% {
    	opacity:1;
    }
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="wizard" class="wizard">
            <div class="wizard__content">
                <header class="wizard__header">
                    <div class="wizard__header-overlay"></div>
                    <div class="wizard__header-content">
                        <h1 class="wizard__title">javascript开始！</h1>
                        <p class="wizard__subheading">简单的 <span>3</span>步骤.</p>
                    </div>
                    <div class="wizard__steps">
                        <nav class="steps">
                            <div class="step">
                                <div class="step__content">
                                    <p class="step__number"><i class="fa fa-github-alt"></i></p><svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"></svg>
                                    <div class="lines">
                                        <div class="line -start"></div>
                                        <div class="line -background"></div>
                                        <div class="line -progress"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="step">
                                <div class="step__content">
                                    <p class="step__number"><i class="fa fa-book"></i></p><svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"></svg>
                                    <div class="lines">
                                        <div class="line -background"></div>
                                        <div class="line -progress"></div>
                       .........完整代码请登录后点击上方下载按钮下载查看