jquery实现步骤流程线条悬浮浮起效果代码-html代码-BFW代码库

jquery实现步骤流程线条悬浮浮起效果代码

代码语言：html

所属分类：进度条

代码描述：jquery实现步骤流程线条悬浮浮起效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title> </title>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <style>
        body {
          background: #d33144;
        }
        
        .process {
          width: 800px;
          margin: 3em auto;
          cursor: default;
        }
        
        .process-items {
          display: table;
          margin: 0 0 10px;
          padding: 0;
          list-style-type: none;
          color: #fff;
          font-size: 18px;
          text-align: center;
        }
        .process-items li {
          display: table-cell;
          width: 25%;
          vertical-align: bottom;
          padding: 0 .5em;
          -webkit-transform: scale(0.65) translateY(40px);
                  transform: scale(0.65) translateY(40px);
          -webkit-transform-origin: bottom center;
                  transform-origin: bottom center;
          transition: -webkit-transform .5s;
          transition: transform .5s;
          transition: transform .5s, -webkit-transform .5s;
        }
        .process-items li.active {
          -webkit-transform: scale(1) translateY(0);
                  transform: scale(1) translateY(0);
        }
        .process-items em {
          display: block;
          margin-top: .5em;
        }
    </style>
</head>

<body>
    <div class="process">
        <ol class="process-items">
            <li class="active">第一步 1
                <em>just do it</em></li>
            <li>第二步 2
                <em>yesterday you said tomorrow</em></li>
            <li>第三步 3
                <em>just do it</em></li&.........完整代码请登录后点击上方下载按钮下载查看