js+css实现视觉差异滚动头部页面代码
代码语言:html
所属分类:视觉差异
代码描述:js+css实现视觉差异滚动头部页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css'> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', serif; } body { height: 100vh; width: 100vw; } #top{ position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; } #top::before{ content:''; position: absolute; bottom: 0; left: 0; height:200px; width: 100%; background:linear-gradient(to top,#fff,transparent); z-index: 1000; } #man{ top: inherit; bottom: 0; } section img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } #text{ position: relative; color:white; font-size: 10rem; } #sec{ padding:100px; padding-bottom:20px; } #sec h2{ font-size: 4rem; margin-bottom: 30px; color:#20496a; } #sec p{ font-size: 1.2rem; line-height:2rem; font-weight:300; color:#20496a; } footer{ margin-top:30px; display:flex; padding:20px; justify-content:space-evenly; align-items:center; background-color:#B0DFEA; } footer a{ color:#20496a; } footer a i{ transition:0.2s; } footer a:nth-of-type(3),footer a:nth-of-type(4), footer a:nth-of-type(5){ font-size:1.3rem;} footer a i:hover{ transform:translateY(-10px); } </style> </head> <body > <section id="top"> <img src="//repo.bfw.wiki/bfwrepo/images/moutain/bg.jpg" id="bg" /> <h2 id="text">Mountains</h2> <img src="//repo.bfw.wiki/bfwrepo/images/moutain/man.png" id="man" /> <img src="//repo.bfw.wiki/bfwrepo/images/moutain/clouds_1.png" id="clouds_1" /> <img src="//repo.bfw.wiki/bfwrepo/images/moutain/clouds_2.png" id="clouds_2" /> <img src="//repo.bfw.wiki/bfwrepo/images/mouta.........完整代码请登录后点击上方下载按钮下载查看
网友评论0