模仿安居客官网pc首页差异滚动效果
代码语言:html
所属分类:视觉差异
代码描述:模仿安居客官网pc首页差异滚动效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> html { height: 100%; margin: 0; padding: 0; overflow: hidden; } body { background: white; margin: 0; padding: 0; height: 100%; transform-style: preserve-3d; perspective: 1px; overflow-y: scroll; overflow-x: hidden; } .parallax { min-height: 80vh; width: 100vw; display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; transform-style: inherit; box-sizing: border-box; overflow: hidden; } .parallax, .parallax::after { background: 50% 50% / cover; } .parallax::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background: url(http://repo.bfw.wiki/bfwrepo/image/5f1ec523499e0.png); background-size: cover; transform-origin: 50% 50% 0; transform: translateZ(-1px) scale(2); z-index: -1; min-height: 100vh; } .paralkax * { filter: drop-shadow(0 .2em ..05em rgba(50,50,50,0.2)); } section:not(.parallax) { background: white; box-sizing: border-box; padding: 5vmin 0; width: 100%; min-height: 80vh; } section .cont { width: 85vw; margin: 0 auto; } input { box-sizing: border-box; font-size: 13px; vertical-align: top; } .header { font-size: 20px; top: 5%; color: white; height: 80px; position: relative; text-align: left; width: 85vw; position: absolute; } .header a { padding: 10px; } .wrapper { text-align: center; position: relative; height: 80px; font-size: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .search { padding: 0 30px; font-size: 18px; width: 30vw; outline: none; height: 80px; border: 1px solid #b3b3b3; border-radius: 20px 0 0 20px; } .submit { cursor: pointer; outline: none; border: none; background-size: 35px 35px; border-radius: 0 20px 20px 0; padding: 15px 25px; display: inline-block; width: 150px; height: 80px; background: #2596cc; color: white; } #app { display: flex; justify-content: space-between; position: relative; } .box { width: 300px; overflow: hidden; background: #f6f6f6; box-sizing: border-box; padding: 0 15px 25px 15px; } .box a { display: flex; flex-direction: column; align-items: center; color: #535353; text-decoration: none; } .box a:hover { color: #2596cc; } .imgBox { width: 280px; height: 186.67px; overflow: hidden; } .imgBox img { width: 100%; height: 100%; transition: all 0.6s linear; } .source { border: 1px solid #535353; padding: 6px 20px; border-radius: 25px; margin: 20px; } .title { margin-bottom: 20px; font-size: 20px; } .detail { font-size: 14px; line-height: 160%; text-align: justify; width: 100%; } /*鼠标hover效果*/ .box>a::after { content: ''; width: 280px; position: absolute; background: #2596cc; bottom: 0; height: 0px; transition: height 0.3s linear; /*利用伪类高度,实现动画效果*/ } .box>a:hover::after { height: 10px; } .box:hover img { transform: scale(1.15); } .box:hover .source { background: #2596cc; border-color: #2596cc; color: #ffffff; } </style> </head> <body translate="no"> <header class="parallax"> <div class="header"> <a>LOGO</a> <a>菜单</a> <a>菜单</a> <a>菜单</a> <a>菜单</a> <a>菜单</a> <a>菜单</a> <a style="float:right;">登录</a> </div> <div class="wrapper"> <input class="search" type="text" placeholder="输入关键字" id="search" /> <button type="submit" class="submit"><i class="fa fa-search fa-3x"></i></button> </div> </header> <section> <div class="cont"> <h2>标题</h2> <div id="app"> <div class="box"> <a href="#"> <div class="imgBox"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" /> </div> <span class="source">玉兔精</span> <h2 class="title">第一个是玉兔精,和别的女妖精都不一样</h2> <span class="detail">玉兔真身,字字珠玑,写她浑身毛发如玉,双眼红映如珠,趴在地上,是一团洁白的绸缎,展开身来,就像一条柔软的银丝。</span> </a> </div> <div class="box"> <a href="#"> <div class="imgBox"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" /> </div> <span class="source">嫦 娥</span> <h2 class="title">第二个是嫦娥,嫦娥在猪八戒心中无处不在</h2> <span class="detail">两弯柳眉,樱桃小口,绛裙似蝶,拿嫦娥下界来比她。猪八戒此时一定是五味杂陈,心绪蹁跹吧。在天竺国,看到了被调包的真公主,就是下凡了的嫦娥。</span> </a> </div> <div class="box"> <a href="#"> <div class="imgBox"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" /> </div> <span class="source">女儿国国王</span> <h2 class="title">第三个是女儿国国王,一直是读者心中的朱砂痣</h2> <div class="detail"> 肤如羊脂,面似桃花,眼含秋波,柳腰袅袅,赛过西施昭君不止三分,更拿嫦娥王母比作她。她一把扯住三藏,俏语娇声,勾人心魄。 </div> </a> </div> <div class="box"> <a href="#"> <div class="imgBox"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" /> </div> <span class="source">万圣公主</span> <h2 class="title">第四个是万圣公主,公主花容月貌,有二十分人才</h2> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0