div+css实现水平与垂直相结合的页面滚动效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现水平与垂直相结合的页面滚动效果代码,先垂直滚动页面3大板块,第二板块的时候,滚动鼠标滚动进水平横向图片列表滚动,然后再滚动到最后一个板块。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@700&family=Great+Vibes&display=swap");
@property --k {
syntax: "<number>";
initial-value: 0;
inherits: true;
}
html {
overflow-x: hidden;
scrollbar-color: gold #121212;
}
body {
margin: 0;
}
header, footer {
display: grid;
place-content: center;
min-height: 100vh;
background: silver;
font-size: 2em;
font: 700 4em oxanium, sans-serif;
text-shadow: 1px 1px 3px;
}
footer {
font-family: Great Vibes, cursive;
}
section {
height: 500vh;
background: #212121;
}
@supports (animation-timeline: view()) {
section {
background: linear-gradient(90deg, rgba(255, 215, 0, calc(1 - round(down, var(--k)))) calc(var(--k)*100%), #0000 0) 0 0/100% 0.5rem no-repeat fixed #212121;
animation: k 1s both;
animation-timeline: view();
animation-range: contain;
}
}
@keyframes k {
to {
--k: 1 ;
}
}
h2 {
color: #ededed;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0