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-.........完整代码请登录后点击上方下载按钮下载查看