svg+js实现图片轮播幻灯片切换水纹波动过渡效果代码-html代码-BFW代码库

svg+js实现图片轮播幻灯片切换水纹波动过渡效果代码

代码语言：html

所属分类：幻灯片

代码描述：svg+js实现图片轮播幻灯片切换水纹波动过渡效果代码

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

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

<head>
    <meta charset="UTF-8">





    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Zeyada&amp;display=swap'>

    <style>
        *,
        ::before,
        ::after {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
        }
        body {
                color: white;
                min-height: 100vh;
                background: black;
                display: grid;
                place-content: center;
                font-family: system-ui, sans-serif;
                font-size: 1rem;
        }
        .gallery-wrapper {
                --ani-speed: 2000ms; /* note - this needs to be the same as in the JS */
                width: 80vw;
                max-width: 800px;
                position: relative;
        }
        .gallery-images {
                width: 100%;
                height: auto;
                aspect-ratio: 6/4;
                position: relative;
                overflow: hidden;
                border: 1px solid #ffffff30;
        }
        
        .gallery-images img {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
                scale: 110%;
                opacity: 0;
                filter: url(#wavy);
                transition:  var(--ani-speed,2000ms) linear;
        }
        .gallery-images img.current {
                opacity: 1;
        }
        
        .gallery-wrapper nav {
                margin-top: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                margin-bottom: 1rem;
        }
        .gallery-wrapper nav button {
                -webkit-appearance: none;
                text-align: inherit;
                background: none;
                box-shadow: none;
                cursor: pointer;
                padding: 0.5rem;
                aspect-ratio: 1/1;
                font: inherit;
                outline: none;
                border-radius: 5px;
                transition: 500ms ease-in-out;
                position: relative;
                cursor: pointer;
                border: 1px solid #eeeeee30;
                color: white;
        }
        .gallery-wrapper nav button:disabled {
                opacity: 0.5;
                pointer-events: none;
        }
        .gallery-wrapper nav button:hover {
                background-color: rgb(11, 65, 112);
        }
        .gallery-wrapper nav > .thumbs {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1rem;
        }
        .gallery-wrapper nav > .thumbs > button {
                border-radius: 50%;
        }
        .gallery-wrapper nav > .thumbs button.current {
                background-color: rgb(11, 65, 112);
        }
        
        .hashtag {
                font-size: 0.8rem;
                font-weight: 300;
                rotate: -90deg;
                position: absolute;
                transform-origin: bottom right;
                left: -14rem;
                top: -1rem;
        }
    </style>




</head>

<body translate="no">
    <section id="gallery-wrapper" class="gallery-wrapper">

        <div id="gallery-images" class="gallery-images">
            <img src="//repo.bfw.wiki/bfwrepo/image/657423d4dfc1d.png" alt="cors" style="opacity: 1;">
            <img src="//repo.bfw.wiki/bfwrepo/image/6645fa8d6f8e2.png" akt="cliffs">
            <img src="//repo.bfw.wiki/bfwrepo/image/657423d4dfc1d.png" alt="mountains">
        .........完整代码请登录后点击上方下载按钮下载查看