css滚动自动定位效果代码
代码语言:html
所属分类:加载滚动
代码描述:css滚动自动定位效果代码,当滚动到一半的时候,系统自动继续滚动将余下一半也显示出来
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Amiri:ital@0;1&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #fbf0e9; } body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--bg); font-family: "Amiri", serif; overflow: hidden; } body:before, body:after { content: ""; position: absolute; width: 100%; height: 10vh; z-index: 101; } body:before { top: 0; background: linear-gradient(var(--bg), transparent); } body:after { bottom: 0; background: linear-gradient(transparent, var(--bg)); } ul { height: 100vh; width: 100vw; overflow: scroll; position: relative; scroll-snap-type: y mandatory; } ul:before { content: ""; position: fixed; width: 0; height: 0; border-bottom: 100vh solid #fff; border-left: 100vw solid transparent; bottom: 0; opacity: 0.6; } li { scroll-snap-align: center; width: 50vw; height: 50vw; max-width: 500px; max-height: 500px; min-width: 450px; min-height: 450px; border-radius: 5px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; color: #686868; letter-spacing: 5px; text-transform: lowercase; font-weight: 400; margin: 15vh auto; box-shadow: 0px 10px 60px 10px rgba(0, 0, 0, 0.3); z-index: 100; } li span.top { font-size: 200%; height: 50%; width: 100%; background: #f1f1f1; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0; text-align: center; padding: 8%; line-height: 1.2; font-style: italic; } span:after { position: absolute; font-style: normal; } span span.title { font-size: 70%; height:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0