使用 HTML CSS JQuery 实现操作进度条cid1072-网页前端设计

作者code

Warning: Undefined property: stdClass::$maxbutton id="5" in /www/wwwroot/code.5g-o.com/wp-content/plugins/kama-clic-counter/class.KCCounter.php on line 733

html and css index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
    <style>
        
    
body {
  margin:0;
  font-family: 'Roboto Condensed', sans-serif;
}

 
h1 {
   	  
  color:#333;
  font-weight:700;
  margin-top:125px;	 
  text-align:center;
  text-transform:uppercase;
  letter-spacing:4px;
  line-height:23px;
}

/* --- Start progress bar --- */

.process-wrapper {
  margin:auto;
  max-width:1080px;
}

#progress-bar-container {
  position:relative;
  width:90%;
  margin:auto;
  height:100px;
  margin-top:65px;
}

#progress-bar-container ul {
  padding:0;
  margin:0;
  padding-top:15px;
  z-index:9999;
  position:absolute;
  width:100%;
  margin-top:-40px
}

#progress-bar-container li:before {
  content:" ";
  display:block;
  margin:auto;
  width:30px;
  height:30px;
  border-radius:50%;
  border:solid 2px #aaa;
  transition:all ease 0.3s;
     
}

#progress-bar-container li.active:before, #progress-bar-container li:hover:before {
  border:solid 2px #fff;
       	 
  background: linear-gradient(to right, #E91E63 0%,#fff 100%); 
}

#progress-bar-container li {
  list-style:none;
  float:left;
  width:20%;
  text-align:center;
  color:#aaa;
  text-transform:uppercase;
  font-size:11px;
  cursor:pointer;
  font-weight:700;
  transition:all ease 0.2s;
  vertical-align:bottom;
  height:60px;
  position:relative;
}

#progress-bar-container li .step-inner {
  position:absolute;
  width:100%;
  bottom:0;
    font-size: 14px;
}

#progress-bar-container li.active, #progress-bar-container li:hover {
  color:#444;
}

#progress-bar-container li:after {
  content:" ";
  display:block;
  width:6px;
  height:6px;
  background:#777;
  margin:auto;
  border:solid 7px #fff;
  border-radius:50%;
  margin-top:40px;
  box-shadow:0 2px 13px -1px rgba(0,0,0,0.3);
  transition:all ease 0.2s;
     
}

#progress-bar-container li:hover:after {
  background:#555;
}

#progress-bar-container li.active:after {
  background:#207893;
}

#progress-bar-container #line {
  width:80%;
  margin:auto;
  background: #eee;
  height:6px;
  position:absolute;
  left:10%;
  top:57px;
  z-index:1;
  border-radius:50px;
  transition:all ease 0.9s;
}

#progress-bar-container #line-progress {
  content:" ";
  width:3%;
  height:100%;
  background: #207893;	 
  background: linear-gradient(to right, #207893 0%,#2ea3b7 100%); 
  position:absolute;
  z-index:2;
  border-radius:50px;
  transition:all ease 0.9s;
}

#progress-content-section {
  width:90%;
  margin: auto;
  background: #f3f3f3;
  border-radius: 4px;
}

#progress-content-section .section-content {
  padding:30px 40px;
  text-align:center;
}

#progress-content-section .section-content h2 {
  font-size:17px;
  text-transform:uppercase;
  color:#333;
  letter-spacing:1px;
}

#progress-content-section .section-content p {
  font-size:16px;
  line-height:1.8em;
  color:#777;
}

#progress-content-section .section-content {
  display:none;
  animation: FadeInUp 700ms ease 1;
  animation-fill-mode:forwards;
  transform:translateY(15px);
  opacity:0;
}

#progress-content-section .section-content.active {
  display:block;
}

@keyframes FadeInUp {
  0% {
    transform:translateY(15px);
    opacity:0;
  }
  
  100% {
    transform:translateY(0px);
    opacity:1;
  }
}

 
    </style>
</head>
<body>
 

<h1>Our Process</h1>
<br> 
<div class="process-wrapper">
<div id="progress-bar-container">
  <ul>
    <li class="step step01 active"><div class="step-inner">HOME WORK</div></li>
    <li class="step step02"><div class="step-inner">RESPONSIVE PART</div></li>
    <li class="step step03"><div class="step-inner">Creative cREATIONS</div></li>
    <li class="step step04"><div class="step-inner">TESTIMONIALS PART</div></li>
    <li class="step step05"><div class="step-inner">OUR LOCATIONS</div></li>
  </ul>
  
  <div id="line">
    <div id="line-progress"></div>
  </div>
</div>

<div id="progress-content-section">
  <div class="section-content discovery active">
    <h2>HOME SECTION</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque justo, consequat non fermentum ac, tempor eu turpis. Proin nulla eros, placerat non ipsum ut, dapibus ullamcorper ex. Nulla in dapibus lorem. Suspendisse vitae velit ac ante consequat placerat ut sed eros. Nullam porttitor mattis mi, id fringilla ex consequat eu. Praesent pulvinar tincidunt leo et condimentum. Maecenas volutpat turpis at felis egestas malesuada. Phasellus sem odio, venenatis at ex a, lacinia suscipit orci.</p>
  </div>
  
  <div class="section-content strategy">
    <h2>GALLERY SECTION</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque justo, consequat non fermentum ac, tempor eu turpis. Proin nulla eros, placerat non ipsum ut, dapibus ullamcorper ex. Nulla in dapibus lorem. Suspendisse vitae velit ac ante consequat placerat ut sed eros. Nullam porttitor mattis mi, id fringilla ex consequat eu. Praesent pulvinar tincidunt leo et condimentum. Maecenas volutpat turpis at felis egestas malesuada. Phasellus sem odio, venenatis at ex a, lacinia suscipit orci.</p>
  </div>
  
  <div class="section-content creative">
    <h2>Creative CREATIONS</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque justo, consequat non fermentum ac, tempor eu turpis. Proin nulla eros, placerat non ipsum ut, dapibus ullamcorper ex. Nulla in dapibus lorem. Suspendisse vitae velit ac ante consequat placerat ut sed eros. Nullam porttitor mattis mi, id fringilla ex consequat eu. Praesent pulvinar tincidunt leo et condimentum. Maecenas volutpat turpis at felis egestas malesuada. Phasellus sem odio, venenatis at ex a, lacinia suscipit orci.</p>
  </div>
  
  <div class="section-content production">
    <h2>TESTIMONIALS NOW</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque justo, consequat non fermentum ac, tempor eu turpis. Proin nulla eros, placerat non ipsum ut, dapibus ullamcorper ex. Nulla in dapibus lorem. Suspendisse vitae velit ac ante consequat placerat ut sed eros. Nullam porttitor mattis mi, id fringilla ex consequat eu. Praesent pulvinar tincidunt leo et condimentum. Maecenas volutpat turpis at felis egestas malesuada. Phasellus sem odio, venenatis at ex a, lacinia suscipit orci.</p>
  </div>
  
  <div class="section-content analysis">
    <h2>OUR LOCATIONS</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque justo, consequat non fermentum ac, tempor eu turpis. Proin nulla eros, placerat non ipsum ut, dapibus ullamcorper ex. Nulla in dapibus lorem. Suspendisse vitae velit ac ante consequat placerat ut sed eros. Nullam porttitor mattis mi, id fringilla ex consequat eu. Praesent pulvinar tincidunt leo et condimentum. Maecenas volutpat turpis at felis egestas malesuada. Phasellus sem odio, venenatis at ex a, lacinia suscipit orci.</p>
  </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <script>
    
    $(".step").click( function() {
  $(this).addClass("active").prevAll().addClass("active");
  $(this).nextAll().removeClass("active");
});

$(".step01").click( function() {
  $("#line-progress").css("width", "3%");
  $(".discovery").addClass("active").siblings().removeClass("active");
});

$(".step02").click( function() {
  $("#line-progress").css("width", "25%");
  $(".strategy").addClass("active").siblings().removeClass("active");
});

$(".step03").click( function() {
  $("#line-progress").css("width", "50%");
  $(".creative").addClass("active").siblings().removeClass("active");
});

$(".step04").click( function() {
  $("#line-progress").css("width", "75%");
  $(".production").addClass("active").siblings().removeClass("active");
});

$(".step05").click( function() {
  $("#line-progress").css("width", "100%");
  $(".analysis").addClass("active").siblings().removeClass("active");
});

 
    </script>
</body>
</html>

在线演示

让链接同时具备两种打开方式
获取源码: Our Animated Progressd
下载数:89人次, 文件大小: 2.2 KB, 上传日期: 2020年-11月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,060 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 8元 才能查看此处内容！立即支付

类似文章