css的scroll-snap实现全屏上下滚动幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:css的scroll-snap实现全屏上下滚动幻灯片效果代码,使用了css的scroll-snap-type、 scroll-snap-align及scroll-snap-stop属性实现。
代码标签: css scroll-snap 实现 全屏 上下 滚动 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
font-weight: 200;
margin: 0;
}
.slides {
--font-size: 10vh;
--snap-height: 100vh;
--snap-inline: 15px;
--snap-bg1: #0f2027;
--snap-bg2: #203a43;
--snap-bg3: #f953c6;
--snap-bg4: #b91d73;
--snap-color: white;
max-block-size: var(--snap-height);
overflow-y: auto;
scrollbar-color: var(--snap-bg4) var(--snap-bg2);
&::-webkit-scrollbar {
inline-size: var(--snap-inline);
}
&::-webkit-scrollbar-thumb {
background-color: var(--snap-bg4);
}
&::-webkit-scrollbar-track {
background-color: var(--snap-bg2);
}
}
.slides:after {
content: "";
display: block;
position: absolute;
inset-inline-start: 50%;
inset-block-end: 1rem;
block-size: 1rem;
inline-size: 1rem;
border-block-end: 1px solid var(--snap-bg3);
border-inline-end: 1px solid var(--snap-bg3);
transfo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0