css+js实现自适应响应式可点击切换时间线效果代码-html代码-BFW代码库

代码语言：html
所属分类：响应式
代码描述：css+js实现自适应响应式可点击切换时间线效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
  

  
<style>
:root {
    --color-accent-light: #00DBDE;
    --color-accent-dark: #FC00FF;
    --color-secondary: #ccc;

    --text-color-default: #2c2c2c;
    --text-color-light: #fff;

    --font-size-default: 15px;
    --font-size-lg: 25px;

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-default: var(--font-weight-regular);

    --border-color-default: var(--color-secondary);
    --border-color-accent: var(--color-accent-dark);

    --bg-color-default: #fff;
    --bg-color-dark: #2c2c2c;
    --bg-color-accent--lignt: var(--color-accent-light);
    --bg-color-accent--dark: var(--color-accent-dark);

    --transition-duration: .2s;
    --transition-timing-function: linear;
    --transition-delay: 0s;

    --negative-multiplier: -1;

    --gradient-default: linear-gradient(122deg, var(--color-accent-light) 0%, var(--color-accent-dark) 100%);

}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-default);
    color: var(--text-color-default);
}

* {
  box-sizing: border-box;
}

/* EXAMPLE STYLES: YOU DON'T NEED THEM!!! */
.header {
    max-width: 500px;
    margin: auto;
    text-align: center;
}

.header__btns {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

body a {
    color: inherit;
    text-decoration: none;
}

.header__btn {
    transition:
            all
            var(--transition-duration)
            var(--transition-timing-function)
            var(--transition-delay);
    padding: 10px 20px;
    margin-right: 10px;
    background-color: var(--bg-color-default);
    border: 1px solid var(--border-color-default);
    border-radius: 3px;
    cursor: pointer;
    outline: none;
}

.header__btn:hover,
.header__btn.js-active {
    color: var(--text-color-light);
    background-color: var(--bg-color-dark);
}

.header__title {
    margin-bottom: 10px;
    font-weight: var(--font-weight-semibold);
}

.content {
    margin: 50px auto;
}

.content__title {
    margin-bottom: 80px;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-default);
    text-align: center;
}

/* TIMELINE STYLES: YOU NEED THEM!!! */
.timeline {
    --wrapper-width: 900px;

    width: 95%;
    max-width: var(--wrapper-width);
    margin: auto;
}

.timeline__stepper {
    --step-border-width: 3px;
    --offset-to-slider-content: 30px;

    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: var(--offset-to-slider-content);
}

@media(min-width: 530px) {
    .timeline__stepper {
        display: flex;
        justify-content: space-around;
        gap: 0;
    }
}

@media(min-width: 700px) {
    .timeline__stepper {
        --offset-to-slider-content: 50px;
    }
}

.timeline__step {
    position: relative;
    width: 100%;
    cursor: pointer;
}

@media(min-width: 530px) {
    .timeline__step {
        width: 100%;;
    }
}

.timeline__icon {
    --timeline-icon-dimensions: 45px;

    position: relative;
    display: block;
    width: var(--timeline-icon-dimensions);
    max-height: var(--timeline-icon-dimensions);
    height: auto;
    margin: 0 auto;
    transition: opacity var(--transition-duration) var(--transition-timing-function) var(--transition-delay);
}

@media(min-width: 700px) {
    .timeline__icon {
        --timeline-icon-dimensions: 60px;

        margin-bottom: 30px;
    }
}

.timeline__icon--active {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    fill: url(#icon-gradient);
    opacity: 0;
}

.timeline__step-title {
    --timeline-dot-dimensions: 11px;
    --extra-offset-fox-pixelperfect: -1px;

    position: relative;
    display: none;
    padding-top: 30px;
    margin-bottom: 0;
    text-align: center;
    line-height: 1.7;
    border-top: var(--step-border-width) solid var(--border-color-default);
}

@media(min-width: 700px) {
    .timeline__step-title {
        display: block;
    }
}

.timeline__step-title:before,
.timeline__step-title:after {
    position: absolute;
    top: var(--dot-top-position);
    left: 50%;
    display: block;
    width: var(--timeline-dot-dimensions);
    height: var(--timeline-dot-dimensions);
    content: '';
    border-radius: 50%;
}

.timeline__step-title:before {
    --dot-top-position: calc(
            var(--timeline-dot-dimensions)/2 * var(--negative-multiplier) + var(--extra-offset-fox-pixelperfect)
    );

    transform: translate(-50%);
    border: 2px solid var(--border-color-default);
    border-radius: 50%;
    background-color: #fff;
    z-index: 5;
}

.timeline__step-title:after {
    --timeline-dot-dimensions: 25px;
    --dot-top-position: calc(
            var(--timeline-dot-dimensions)/2 * var(--negative-multiplier) + var(--extra-offset-fox-pixelperfect)
    );

    transform: translate(-50%) scale(0);
    border-radius: 50%;
    background-color: #fff;
}

/* this elements generates in JS */
.timeline__step-active-marker {
    --slide-pos-y: none; /* calcs on the fly in js */
    --slide-pos-x: none; /* calcs on the fly in js */
    --slide-width: auto; /* calcs on the fly in js */

    --transition-timing-function: cubic-bezier(0, 0, 0, 1.2);

    position: absolute;
    top: var(--slide-pos-y);
    left: 0;
    display: none;
    width: var(--slide-width);
    height: var(--step-border-width);
    transform: translateX(var(--slide-pos-x));
    transition: transform var(--transition-duration) var(--transition-timing-function) var(--transition-delay);
    background-image: var(--gradient-default);
}

@media(min-width: 700px) {
    .timeline__step-active-marker {
        display: block;
    }
}

.timeline__step.is-active {
    cursor: default;
}

.timeline__step.is-active .timeline__step-title {
    font-weight: var(--font-weight-semibold);
}

.timeline__step.is-active .timeline__step-title:before {
    transition: background-color var(--transition-duration) var(--transition-timing-function) var(--transition-delay);
    background-color: var(--color-accent-dark);
    border-color: var(--border-color-accent);
}

.timeline__step.is-active .timeline__step-title:after {
    transform: translate(-50%) scale(1);
    transition: transform var(--transition-duration) var(--transition-timing-function) var(--transition-delay);
    background-image: var(--gradient-default);
    opacity: .35;
}

.timeline__step.is-active .timeline__icon--default,
.timeline__step:not(.is-active):hover .timeline__icon--default {
    opacity: 0;
}

.timeline__step.is-active .timeline__icon--active,
.timeline__step:not(.is-active):hover .timeline__icon--active {
    opacity: 1;
}

.timeline__slides {
    position: relative;
    width: 600px;
    max-width: 100%;
    margin: auto;
}

.timeline__slide {
    --content-offset-x: 20px;
    --content-offset-y: 30px;

    --decoration-blur-spread: 20px;
    --decoration-opacity: .7;
    --decoration-pos-x: 0;
    --decoration-pos-y: 20px;
    --decoration-scale: 1;

    position: absolute;
    top: 0;
    left: 0;
    padding: var(--content-offset-y) var(--content-offset-x);
    border-radius: 5px;
    background-color: var(--bg-color-default);
    opacity: 0;
    visibility: hidden;
}

@media(min-width: 700px) {
    .timeline__slide {
        --content-offset-x: 30px;
        --content-offset-y: 40px;
    }
}


.timeline__slide:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-image: var(--gradient-default);
    filter: blur(var(--decoration-blur-spread));
    opacity: 0;
    transform: translate(var(--decoration-pos-x), var( --decoration-pos-y)) scale(var(--decoration-scale));
    z-index: -1;
}

.timeline__slide.is-active {
    transition: opacity var(--transition-duration) var(--transition-timing-function) var(--transition-delay);
    opacity: 1;
    visibility: visible;
}

.timeline__slide.is-active:before {
    --transition-delay: var(--transition-duration);

    transition: opacity var(--transition-duration) var(--transition-timing-function) var(--transition-delay);
    opacity: var(--decoration-opacity);
}

.timeline__slide-title {
    margin-top: 0;
}

.timeline__slide-content {
    line-height: 1.7;
}

.timeline__slide-content p:first-child {
    margin-top: 0;
}

.timeline__slide-content p:last-child {
    margin-bottom: 0;
}
</style>



</head>

<body  >
  <!--SVG GRADIENTS AND SPRITES PART-->
<svg aria-hidden="true" focusable="false" style="width:0;height:0;position:absolute;">
  <linearGradient id="icon-gradient">
    <stop offset="0%" stop-color="var(--color-accent-light)" />
    <stop offset="100%" stop-color="var(--color-accent-dark)" />
  </linearGradient>
  <defs>
    <symbol id="icon-brain" viewBox="0 0 66 66">
<g><g><g><path d="m28.5 58c-.6 0-1-.4-1-1v-45.8c0-.6.4-1 1-1s1 .4 1 1v45.8c0 .6-.4 1-1 1z"/></g><g><path d="m11.9 41.8c-2.9 0-5.1-2.2-5.1-5.1s2.2-5.1 5.1-5.1c.6 0 1 .4 1 1s-.4 1-1 1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m23.8 11.6c-.6 0-1-.4-1-1 0-1.7-1.4-3.1-3.1-3.1s-3.1 1.4-3.1 3.1c0 .6-.4 1-1 1s-1-.4-1-1c0-2.9 2.2-5.1 5.1-5.1s5.1 2.2 5.1 5.1c0 .6-.4 1-1 1z"/></g><g><path d="m21.7 61.2c-1.2 0-2.3-.5-3.1-1.3-.8-.9-1.2-2-1.2-3.2 0-.6.5-1 1.1-.9.6 0 1 .5.9 1.1 0 .6.2 1.3.6 1.7.4.5 1 .7 1.7.7 1.4 0 2.5-1 2.5-2.3 0-.6.4-1 1-1s1 .4 1 1c0 2.3-2 4.2-4.5 4.2z"/></g><g><path d="m18.4 32.8c-.1 0-.2 0-.3 0-1.9-.6-3-2.6-2.5-4.5.4-1.5 1.6-2.5 3.2-2.6h.5c.6 0 1 .4 1 1s-.4 1-1 1h-.4c-.6.1-1.2.5-1.3 1.2-.3.9.3 1.8 1.1 2.1.5.2.8.7.7 1.2-.2.3-.6.6-1 .6z"/></g><g><path d="m28.6 20.3c-.6 0-1-.4-1-1v-.4c-.1-.6-.5-1.2-1.2-1.3-.9-.3-1.8.3-2.1 1.1-.2.5-.7.8-1.2.7-.5-.2-.8-.7-.7-1.2.6-1.9 2.6-3 4.5-2.5 1.5.4 2.5 1.6 2.6 3.2v.5c.1.5-.3.9-.9.9z"/></g><g><path d="m28.6 28c-.6 0-1-.4-1-1v-.4c-.1-.6-.5-1.2-1.2-1.3-.9-.3-1.8.3-2.1 1.1-.2.5-.7.8-1.2.7-.5-.2-.8-.7-.7-1.2.6-1.9 2.6-3 4.5-2.5 1.5.4 2.5 1.6 2.6 3.2v.5c.1.5-.3.9-.9.9z"/></g><g><path d="m15.6 35.8c-.5 0-.9-.4-1-.9-.1-.9.1-1.9.7-2.6.6-.8 1.6-1.3 2.6-1.3.9-.1 1.8.1 2.5.7.8.6 1.3 1.6 1.3 2.6 0 .6-.4 1-.9 1.1-.6 0-1-.4-1.1-.9 0-.5-.2-.9-.6-1.2-.3-.3-.7-.4-1.1-.3-.5 0-1 .3-1.2.6-.3.3-.4.7-.3 1.1.1.5-.3 1.1-.8 1.1z"/></g><g><path d="m28.6 44.4c-.5 0-1-.4-1-.9-.1-1-.8-1.8-1.8-2.1-1.2-.4-2.6.4-3 1.7-.1.5-.7.8-1.2.7s-.8-.7-.7-1.2c.7-2.4 3.1-3.7 5.4-3.1 1.8.5 3.1 2.1 3.2 3.9.1.5-.3 1-.9 1z"/></g><g><path d="m18.6 46.8c-.5 0-1-.4-1-.9 0-.6.4-1 .9-1.1.6 0 1.2-.3 1.6-.8s.6-1.1.5-1.7c-.1-1.2-1.1-2.4-2.6-2.3-.5 0-1-.4-1.1-.9 0-.6.4-1 .9-1.1 2.3-.1 4.4 1.7 4.6 4.1.1 1.1-.2 2.3-1 3.2-.5.9-1.6 1.4-2.8 1.5z"/></g><g><path d="m15.9 19.7c-.1 0-.3 0-.4-.1-1.6-.8-3-2-3.9-3.5-1.9-2.8-2.2-6.4-.6-9.6 2.3-4.8 8.2-6.9 13-4.7 3.6 1.7 5.8 5.5 5.6 9.4 0 .6-.5 1-1.1.9-.6 0-1-.5-.9-1.1.2-3.1-1.6-6.1-4.4-7.4-3.9-1.8-8.5-.1-10.4 3.7-1.2 2.5-1 5.3.5 7.6.8 1.2 1.8 2.2 3.1 2.8.5.2.7.8.5 1.3-.3.5-.6.7-1 .7z"/></g><g><path d="m21.9 65c-.1 0-.2 0-.3 0-2.1-.1-4-1-5.4-2.5-2.9-3.1-2.7-8 .5-10.9.4-.4 1-.4 1.4.1.4.4.4 1-.1 1.4-2.3 2.1-2.4 5.8-.3 8.1 1 1.1 2.4 1.8 4 1.8 1.5.1 3-.5 4.1-1.5 1.3-1.1 2-2.9 1.8-4.7-.1-.5.3-1 .9-1.1.6 0 1 .3 1.1.9.2 2.4-.7 4.8-2.4 6.4-1.5 1.2-3.4 2-5.3 2z"/></g><g><path d="m8.4 28.7c-.3 0-.7-.2-.9-.5-1.6-2.7-1.8-6-.6-8.7 1-2.2 2.8-4 5.1-4.8.5-.2 1.1.1 1.3.6s-.1 1.1-.6 1.3c-1.7.6-3.2 2-3.9 3.8-1 2.2-.9 4.8.4 6.9.3.5.1 1.1-.3 1.4-.1 0-.3 0-.5 0z"/></g><g><path d="m13.7 49.9c-6.9 0-12.3-5.4-12.3-12.3 0-6.8 5.5-12.3 12.3-12.3.6 0 1 .4 1 1s-.4 1-1 1c-5.7 0-10.3 4.6-10.3 10.3 0 5.8 4.5 10.3 10.3 10.3.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m14.5 59h-.1c-3.1-.4-5.6-2.5-6.5-5.4-.7-2-.5-4.3.5-6.1.2-.5.8-.7 1.2-.5.5.2.7.8.4 1.3-.7 1.4-.8 3.2-.3 4.6.7 2.2 2.6 3.8 4.9 4 .5.1.9.6.9 1.1-.1.6-.5 1-1 1z"/></g><g><path d="m28.6 58c-.6 0-1-.4-1-1v-45.8c0-.6.4-1 1-1s1 .4 1 1v45.8c0 .6-.4 1-1 1z"/></g></g><g><path d="m37.9 40h-9.3c-.6 0-1-.4-1-1v-12c0-.6.4-1 1-1h9.3c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1zm-8.3-2h7.3v-10h-7.3z"/></g><g><path d="m39 44.9h-10.5c-.6 0-1-.4-1-1v-21.8c0-.6.4-1 1-1h10.5c2.5 0 4.7 2.2 4.7 4.7v14.4c0 2.6-2.1 4.7-4.7 4.7zm-9.5-2h9.5c1.5 0 2.7-1.2 2.7-2.7v-14.4c0-1.4-1.3-2.7-2.7-2.7h-9.5z"/></g><g><path d="m52.9 33.6h-9.9c-.6 0-1-.4-1-1s.4-1 1-1h9.9c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m56.8 36.7c-2.3 0-4.1-1.8-4.1-4.1s1.8-4.1 4.1-4.1 4.1 1.........完整代码请登录后点击上方下载按钮下载查看