css+div实现图片幻灯片代码-html代码-BFW代码库

css+div实现图片幻灯片代码

代码语言：html

所属分类：幻灯片

代码描述：css+div实现图片幻灯片代码，没有一行js代码，纯css实现

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
  
  
<style>
*,
::before,
::after {
        box-sizing: border-box;
}
:root {
        --clr-primary: #111;
        --clr-accent-1: #f43f5e;
        --clr-accent-2: #0284c7;
}

body {
        background: black;
        color: white;
        display: grid;
        place-content: center;
        min-height: 100svh;
        padding: 1rem;
        font-family: system-ui;
}
.sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
}

main {
        --duration: 1000ms;
        --img-width: 250px;
        --padding: 2rem;
        --gap: 10px;
        --gallery-width: calc(var(--img-width) + var(--padding) * 2);

        --offset: calc(var(--img-width) + var(--gap));

        --dots-1-bg: var(--clr-accent-1);
        --dots-2-bg: var(--clr-accent-1);
        --dots-3-bg: var(--clr-accent-1);
        --dots-4-bg: var(--clr-accent-1);
        --dots-bg-checked: var(--clr-accent-2);

        --dots-1-width: 1rem;
        --dots-2-width: 1rem;
        --dots-3-width: 1rem;
        --dots-4-width: 1rem;
        --dots-width-checked: 2rem;
        --dots-height: 1rem;

        background-color: rgba(255 255 255 / 1);
        border-radius: 15px;
        width: var(--gallery-width);
        margin: auto;
        overflow: hidden;
        outline-offset: 0.5rem;
        outline: 1px solid #ffffff50;
        padding: 2rem var(--padding);
}

main:has(#option-1:checked) {
        --gallery-x: calc(var(--offset) * 0);
        --dots-1-bg: var(--dots-bg-checked);
        --dots-1-width: var(--dots-width-checked);
        --img-1-filter: 0;
}
main:has(#option-2:checked) {
        --gallery-x: calc(var(--offset) * -1);
        --dots-2-bg: var(--dots-bg-checked);
        --dots-2-width: var(--dots-width-checked);
        --img-2-filter: 0;
}
main:has(#option-3:checked) {
        --gallery-x: calc(var(--offset) * -2);
        --dots-3-bg: var(--dots-bg-.........完整代码请登录后点击上方下载按钮下载查看