css实现滚动到网站底部渐变动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现滚动到网站底部渐变动画效果代码,包含完整的网站底部导航,自适应。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=IBM%20Plex%20Sans:500|IBM%20Plex%20Sans:300"); :root { --m: 4rem; } * { box-sizing: border-box; scroll-behavior: smooth; } body { background-color: black; color: white; font-family: "IBM Plex Sans"; font-weight: 300; display: flex; flex-direction: column; align-items: center; height: 190vh; margin: 0; color: #d5d5d5; font-size: calc(0.3 * var(--m)); } h2 { font-weight: 500; text-align: center; font-size: var(--m); margin: 0; } h3 { font-weight: 500; font-size: calc(0.6 * var(--m)); margin: 0; } .card { height: calc(8 * var(--m)); width: calc(12 * var(--m)); background: linear-gradient(120deg, #ff8064, #725bdc); color: black; border-radius: calc(0.5 * var(--m)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--m); position: fixed; margin: calc(2 * var(--m)) calc(5 * var(--m)) calc(5 * var(--m)) calc(5 * var(--m)); } button { background-color: #000; font-size: calc(0.4 * var(--m)); border: none; color: #e5e5e5; font-family: "IBM Plex Sans"; font-weight: 400; padding: calc(0.35 * var(--m)) calc(0.8 * var(--m)); border-radius: calc(0.3 * var(--m)); } footer { margin-top: 80vh; z-index: 500; width: 100%; height: 100vh; display: flex; flex-direction: row; justify-content: space-evenly; align-items: flex-end; padding: 5rem 2vw; position: relative; } footer::before { content: ''; position: absolute; inset: 0; background: linear-gradient( rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 1) 50%, rgb(0, 0, 0) ); z-index: -7; } .backdrop { z-index: -5; position: absolute; inset: 0; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); mask-image: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 1) 30%, rgb(0, 0, 0) ); -webkit-mask-image: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 1) 30%, rgb(0, 0, 0) ); } .col { flex-direction: column; align-items: flex-start; justify-content: flex-start; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0