jquery+css实现简洁横向文字列表点击放大效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery+css实现简洁横向文字列表点击放大效果代码,点击横向的文字列表试试。
代码标签: jquery css 简洁 横向 文字 列表 点击 放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: grey; background-size: cover; background-repeat: no-repeat; background-position: center; margin: 0; min-height: 100vh; overflow-x: hidden; user-select: none; } .articles { height: 220px; width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; padding-left: 15%; overflow: hidden; align-items: center; margin-top: 80px; transition: transform 0.5s ease; } .articles .articleName { width: 225px; height: 150px; flex-grow: 0; flex-shrink: 0; border-left: 1px solid white; border-bottom: 1px solid white; border-top: 1px solid white; justify-content: left; transition: all 0.15s ease; cursor: pointer; position: relative; } .articles .articleName .contain { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .articles .articleName::before { content: attr(data-num); position: absolute; top: -28px; font-family: "Roboto", sans-serif; font-size: 15px; left: 0; color: rgba(190, 190, 190, 0.6); transition: all 0.25s ease; } .articles .articleName:hover::before { color: gainsboro; } .articles .articleName:active span { transform: scale(0.92); } .articles .articleName::after { content: "arrow_forward"; position: absolute; bottom: 20px; left: 10px; font-family: "Material Icons"; font-size: 32px; color: white; transition: opacity 0.15s ease, left 0.5s ease; opacity: 0; } .articles .articleName:hover { background: #23a943; } .articles .articleName:hover::after { opacity: 1; left: 20px; } .articles .articleName:last-child { border-right: 1px solid white; } .articles .articleName.zoom { background-color: #23a943; } .articles .articleName.zoom::after { left: 100%; } .articles .articleName span { font-family: "Roboto", sans-serif; color: white; font-size: 26px; letter-spacing: 1px; max-width: 175px; display: block; transition: transform 0.1s ease, margin 0.5s ease; padding: 20px; position: absolute; } @media (min-height: 500px) { .articles { position: absolute; top: 50%; transform: translateY(-50%); margin-top: 0; } } .logo { height: 70px; font-size: 24px; font-family: "Montserrat", sans-serif; padding: 0 30px; color: white; position: fixed; top: 0; left: 0; line-height: 65px; z-index: 10; background-size: 100% 100%; background-position: 0 -70px; background-repeat: no-repeat; background-image: linear-gradient(to right, black, black); transition: all 0.5s ease; } .logo.zoom { background-position: 0 0; } .menu { position: fixed; right: 0; top: 0; width: 65px; height: 65px; font-family: "Material Icons", sans-serif; font-size: 34px; text-align: center; line-height: 65px; color: black; background: whitesmoke; z-index: 10; } @keyframes fadeout { 0% { opacity: 1; background: #d35400; } 25% { background: #d35400; } 50% { background: #ba4a00; } 75% { opacity: 1; background: #a04000; } 100% { opacity: 0; background: #a04000; } } .zoom-container { position: fixed; bottom: 0; top: 0; right: 0; left: 0; transition: all 0.5s ease; overflow-y: auto; overflow-x: hidden; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(//repo.bfw.wiki/bfwrepo/image/666ab47628c85.png); background-size: cover; background-repeat: no-repeat; background-position: center; transition: all 1s ease; } .zoom-container.zoom { transition: transform 0.25s cubic-bezier(0.37, 0.01, 1, 0.9); } .zoom-container::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #646464; opacity: 0; animation: fadeout 2s ease; } article { background: whitesmoke; height: 0; display: block; transition: all 0.5s ease; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } article h1 { padding-left: 60px; color: black; font-family: "Roboto", sans-serif; font-size: 30px; padding: 70px 0 0 120px; margin: 0; } article h3 { font-size: 15px; margin: 0; padding: 2px 0 0 120px; font-family: "Lora", "Roboto", serif; } article * { opacity: 0; transition: all 1s ease; } article.collapsing { transition: all 1s ease, height 1s ease; } article.expanding { transition: all 0s, height 0.1s ease; } article.open * { opacity: 1; } .buttons { padding-top: 25px; padding-left: 15%; padding-right: 80px; font-family: "Montserrat", sans-serif; line-height: 45px; } .buttons * { display: inline-block; } @media (min-height: 500px) { .buttons { padding-top: 0; position: fixed; bottom: 5%; left: 0; right: 0; } } .buttons .all-works { padding: 0 20px; background: white; float: left; background-image: radial-gradient(circle 60px at 50% 50%, rgba(255, 69, 0, 0.3), rgba(255, 69, 0, 0)); background-repeat: no-repeat; background-size: 120px 120px; background-position: 50% -120px; transition: box-shadow 0.25s ease, transform 0.25s ease; background-attachment: fixed; } .buttons .all-works:hover { box-shadow: 4px 0 0 orangered inset, 0 4px 6px 2px rgba(0, 0, 0, 0.4); transform: translateY(-4px); } .buttons .all-works:hover::after { content: ""; position: absolute; top: 100%; bottom: -4px; right: 0; left: 0; } .buttons .all-works:active { transition: all 0.1s ease; box-shadow: 8px 0 0 orangered inset, 0 4px 6px 2px rgba(0, 0, 0, 0.4); } .buttons .all-works.toggled { transform: translateY(0); box-shadow: 8px 0 0 orangered inset, 0 4px 6px 2px rgba(0, 0, 0, 0); } .buttons .social { float: right; margin: 0; padding: 0; list-style-type: none; background: black; padding: 0 20px; background-image: radial-gradient(circle 60px at 50% 50%, rgba(128, 128, 128, 0.55), rgba(128, 128, 128, 0)); background-size: 120px 120px; background-position: 50% -120px; background-repeat: no-repeat; transition: box-shadow 0.25s ease, transform 0.25s ease; background-attachment: fixed; } .buttons .social:hover { box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.4); transform: translateY(-4px); } .buttons .social:hover::after { content: ""; position: absolute; top: 100%; bottom: -4px; right: 0; left: 0; } .buttons .social li { margin-left: 6px; color: white; transition: all 0.25s ease; } .buttons .social li:hover { box-shadow: 0 -4px 0 grey inset; padding-top: -20px; } .buttons .social li:active { box-shadow: 0 -8px 0 grey inset; } .buttons .social li:first-child { margin-left: 0; } body.hideGlow .buttons *, body.hideGlow .all-works-navigation { background-size: 0 0 !important; } </style> </head> <body translate="no"> <div class="logo">intro</div> <div class="menu">menu</div> <div class="zoom-container animate"> <section class="articles"> <div class="articleName" data-num="01"> <div class="contain"><span>Nike Promo</span></div> </div> <div class="articleName" data-num="02"> <div class="contain"><span>Natural Promo Site</span></div> </div> <div class="articleName" data-num="03"> <div class="contain"><span>BM Mobile App</span></div> </div> <div class="articleName" data-num="04"> <div class="contain"><span>Zara Redesign</span></div> </div> </section> <section class="buttons" data-num="05"> <div class="all-works">view all works</div> <ul class="social"> <li>medium</li> <li>behance</li> <li>dribbble</li> <li>facebook</li> </ul> </section> </div> <article> <h1>Promo Site</h1> <h3>Year: 2018 - Category: Art Direction</h3><img src=""/> </article> <div class="all-works-expand"></div> <div class="all-works-navigation"> <ul class="categories"> <li selected="0">Featured</li> <li>Beta</li> <li>All</li> </ul> <div c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0