纯css实现立体滑块图片幻灯片代码-html代码-BFW代码库

纯css实现立体滑块图片幻灯片代码

代码语言：html

所属分类：幻灯片

代码描述：纯css实现立体滑块图片幻灯片代码，chrome浏览器支持。

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

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

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

  
  
<style>
/*
vars
*/
:root {
    --background-radial-gradient: radial-gradient(rgb(255, 255, 255), rgb(192, 192, 192));
    --font: .875rem/1.5 system-ui, sans-serif;
    --font-color: rgb(0 0 0 / 1);
}

/*
global
*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

*:focus-visible,
*::scroll-marker:focus-visible,
*::scroll-button(*):focus-visible {
    outline: 2px solid rgb(0 0 0 / 1);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgb(0 0 0 / .5);
}

body {
    min-height: 100dvh;
    background: var(--background-radial-gradient);
    display: grid;
    place-content: center;
    overflow: hidden;
}

/*
properties
*/
@property --_cover-flow-nav-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --_cover-flow-slide-distance {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/*
functions
*/
@function --_calc-cover-flow-offset(--s, --d, --p) {
    result: calc(var(--s) * 2 + var(--d) * 2 + var(--p) * 2);
}

@function --_supports-function-test() returns <length> {
    result: 1px;
}

/*
cover-flow
*/
.cover-flow {
    /*
    user-configurable variables
    */
    --_cover-flow-image-width: 576; /* match the image width used in the markup */
    --_cover-flow-image-height: 576; /* match the image height used in the markup */

    --_cover-flow-scroll-button-size: clamp(1.5rem, min(7dvw, 7dvh), 2.5rem);
    --_cover-flow-scroll-button-distance: clamp(.5rem, min(2dvw, 2dvh), .875rem);
    --_cover-flow-scroll-button-image-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='%23fff' d='M225 132.3 207.3 150 357.3 300 207.3 450 225 467.65 392.65 300 225 132.3Z'/%3E%3C/svg%3E");

    --_cover-flow-scroll-marker-group-position: bottom; /* top, center or bottom */
    --_cover-flow-scroll-marker-group-distance: clamp(.875rem, min(3dvw, 3dvh), 1.25rem);

    --_cover-flow-scroll-marker-size: clamp(.25rem, min(2dvw, 2dvh), .938rem);
    --_cover-flow-scroll-marker-size-active: clamp(1rem, min(4.5dvw, 4.5dvh), 2.5rem);
    --_cover-flow-scroll-marker-distance: c.........完整代码请登录后点击上方下载按钮下载查看