css的Grid Overlap实现幻灯切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:css的Grid Overlap实现幻灯切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700"); @import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700"); :root { --pad: 5vmin; --shadow-color: 0deg 0% 80%; --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.17), 0.4px 0.7px 0.9px -1.2px hsl(var(--shadow-color) / 0.17), 0.8px 1.5px 1.9px -2.5px hsl(var(--shadow-color) / 0.17); --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.18), 0.7px 1.3px 1.7px -0.8px hsl(var(--shadow-color) / 0.18), 1.6px 3.2px 4px -1.7px hsl(var(--shadow-color) / 0.18), 3.8px 7.5px 9.5px -2.5px hsl(var(--shadow-color) / 0.18); --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.16), 0.8px 1.7px 2.1px -0.4px hsl(var(--shadow-color) / 0.16), 1.5px 2.9px 3.7px -0.7px hsl(var(--shadow-color) / 0.16), 2.3px 4.7px 5.9px -1.1px hsl(var(--shadow-color) / 0.16), 3.7px 7.3px 9.2px -1.4px hsl(var(--shadow-color) / 0.16), 5.7px 11.3px 14.2px -1.8px hsl(var(--shadow-color) / 0.16), 8.5px 17.1px 21.5px -2.1px hsl(var(--shadow-color) / 0.16), 12.5px 25px 31.4px -2.5px hsl(var(--shadow-color) / 0.16); } body { font-size: 20px; line-height: 1.8rem; font-family: Lato, sans-serif; background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E'); background-position: center; padding: var(--pad); } h1 { --size: clamp(30px, 5vw, 100px); font-size: var(--size); line-height: 100%; font-family: Merriweather, serif; margin: 0 0 var(--pad) 0; } h1 span { line-height: 100%; font-size: 50%; display: block; } .icons { width: 0; height: 0; } .page { padding: var(--pad); background-color: white; width: calc(100% - (var(--pad) * 2)); max-width: 600px; margin: 0 auto; outline: solid 1px lightgrey; box-shadow: var(--shadow-elevation-high); } img { max-width: 100%; } .carousel { margin: 0; padding: 0; list-style: none; border: solid 1px lightgrey; display: grid; grid-template-areas: "overlap"; align-items: center; justify-content: center; padding: var(--pad); } .carousel li { grid-area: overlap; text-align: center; transition: opacity 0.4s ease-in-out; display: flex; flex-direction: column; align-items: center; gap: 3vmin; pointer-events: none; overflow: hidden; } .carousel li > * { transform: translatey(30px); opacity: 0; transition-property: transform, opacity; transition-duration: 0.2s; transition-timing-function: ease-in; } .carousel li > *:nth-child(1) { transition-delay: 0.1s; } .carousel li > *:nth-child(2) { transition-delay: 0.2s; } .carousel li > *:nth-child(3) { transition-delay: 0.3s; } .carousel li > *:nth-child(4) { transition-delay: 0.4s; } .carousel li > *:nth-child(5) { transition-delay: 0.5s; } .carousel li > *:nth-child(6) { transition-delay: 0.6s; } .carousel li > *:nth-child(7) { transition-delay: 0.7s; } .carousel li > *:nth-child(8) { transition-delay: 0.8s; } .carousel li > *:nth-child(9) { transition-delay: 0.9s; } .carousel li > *:nth-child(10) { transition-delay: 1s; } .carousel li p { margin: 0; } .carousel .active { pointer-events: all; } .carousel .active > * { opacity: 1; transform: translatey(0); transition-duration: 0.4s; transition-timing-function: ease-out; } .carousel .active > *:nth-child(1) { transition-delay: 0.5s; } .carousel .active > *:nth-child(2) { transition-delay: 0.6s; } .carousel .active > *:nth-child(3) { transition-delay: 0.7s; } .carousel .active > *:nth-child(4) { transition-delay: 0.8s; } .carousel .active > *:nth-child(5) { transition-delay: 0.9s; } .carousel .active > *:nth-child(6) { transition-delay: 1s; } .carousel .active > *:nth-child(7) { transition-delay: 1.1s; } .carousel .active > *:nth-child(8) { transition-delay: 1.2s; } .carousel .active > *:nth-child(9) { transition-delay: 1.3s; } .carousel .active > *:nth-child(10) { transition-delay: 1.4s; } .pagination { display: flex; gap: 1vw; margin: 0; margin-top: var(--pad); padding: 0; list-style: none; justify-content: center; } .pagination button { cursor: pointer; background: none; border: 0; padding: 0.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; fill: grey; border-radius: 100vmax; } .pagination button:hover { background-color: lightgrey; fill: black; } .pagination .active button { background-color: black; fill: white; } .next { background-color: black; color: white; border: 0; font-size: 1.2rem; text-transform: uppercase; padding: 10px 17px; cursor: pointer; } .next:hover { background-color: rebeccapurple; } pre { margin: 0; background-color: #efefef; max-width: 100%; } code { padding: calc(var(--pad) * 0.5) var(--pad); display: block; text-align: left; font-size: 16px; max-width: 100%; overflow: auto; } .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } </style> </head> <body > <div class="icons"> <svg> <defs> <path id="icon-layer" d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0