glightbox实现一个图片相册点击放大图片效果代码
代码语言:html
所属分类:图片放大
代码描述:glightbox实现一个图片相册点击放大图片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } li { margin-bottom: 10px; } .section { padding: 95px 0; } body { font-family: 'Gilroy', sans-serif; background: #fff; color: #666; font-size: 16px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif !important; } a, a:hover { text-decoration: none; color: #000; } .text-center { text-align: center; } .pair { background: #f8f8f8; } @media (min-width: 1200px) { .container { max-width: 1040px; } } header { position: absolute; width: 100%; top: 0; left: 0; border-bottom: 1px solid transparent; z-index: 999; transition: all 0.3s ease-in-out; } header.fixed { background: #fff; border-bottom: 1px solid #cecece; } .header-unpin { position: fixed; opacity: 0; transform: translate3d(0, -100%, 0); transition: all 0.3s ease-in-out; } .header-pin { position: fixed; background: #fff; opacity: 1; border-bottom: 1px solid #cecece; transform: translate3d(0, 0%, 0); transition: all 0.6s ease-in-out; } .header-inner { padding: 25px 0; overflow: hidden; } .logo { font-family: 'Lobster', cursive; color: #000; float: left; font-size: 1.6em; } header ul { float: right; position: relative; top: 4px; } header ul li { float: left; list-style: none; margin-left: 25px; opacity: 1; transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } header ul li a { color: #2b2b2b; font-weight: 600; font-size: 0.8em; } header ul:hover li { opacity: 0.7; transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } header ul li:hover { opacity: 1; transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } header ul li:hover a { color: #000000; } h3 { font-family: 'Gilroy', sans-serif; font-size: 1.7em; border-bottom: 1px solid #eee; padding-bottom: 25px; margin-bottom: 30px; font-weight: 600; color: #000; display: flex; } h4 { font-family: 'Gilroy', sans-serif; margin-bottom: 25px; font-weight: 600; color: #000; font-size: 1.2em; } a { color: #000; } p { line-height: 1.7em; margin-bottom: 2em; color: #2b2b2b; } .mcbutton { padding: 11px 45px; margin-top: 20px; display: inline-block; border-radius: 4px; margin-right: 10px; color: #000; border: 2px solid #000; font-weight: 600; font-weight: 700; text-transform: uppercase; font-size: .7em; position: relative; width: 100%; text-align: center; } .mcbutton::before, .mcbutton::after { content: ''; display: block; position: absolute; width: 0; height: 2px; background: #000; transition: all 0.2s ease-in-out; z-index: 99; } .mcbutton::before { left: 0; top: 0; } .mcbutton::after { right: 0; bottom: 0; } .mcbutton:hover::before, .mcbutton:hover::after { width: 100%; transition: all 0.4s ease-in-out; } .mcbutton span::before, .mcbutton span::after { content: ''; display: block; position: absolute; width: 2px; height: 0; background: #000; transition: all 0.3s ease-in-out; } .mcbutton span::before { left: 0; top: 0; } .mcbutton span::after { right: 0; bottom: 0; } .mcbutton:hover span::before, .mcbutton:hover span::after { height: 100%; transition: all 0.3s ease-in-out; } .mcbutton.primary { background: #FFC107; } .mcbutton.black { background: #1b1b1b; color: #fff; } .lead .mcbutton.primary { border-color: #a2a2a2; } .lead .mcbutton { padding: 16px 45px; font-size: 0.6em; } .mcbutton i { color: inherit; font-size: 1.5em; margin-right: 10px; } a { text-decoration: none; } ol { margin-left: 2em; margin-bottom: 2em; } ul { margin-left: 1em; margin-bottom: 0; } ul ul { margin-left: 1em; } strong { font-weight: 600; color: #1f1f1f; } .intro { width: 100%; margin: 0 auto; background: url(../img/head.jpg); background-size: cover; margin-bottom: 0px; height: 100vh; width: 100%; display: flex; align-items: center; padding-top: 80px; min-height: 579px; max-height: 579px; } .intro h1 { margin-top: 0; font-size: 3.3em; color: #000; font-weight: 100; margin-bottom: 35px; text-align: center; } .tagline { color: #3a3a3a; margin-bottom: 30px; font-weight: 600; text-align: center; font-size: 17px; } .lead { margin-bottom: 2em; } .lead .mcbutton { border-color: #595959; cursor: pointer; } .heading-icon { margin-right: 16px } .box-container { display: inline-block; margin: 0; padding: 0; margin-top: 1.4em; width: 100%; } .box { list-style-type: none; float: left; opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 0.2s, transform 0.35s; } .box.show { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.4s, transform 0.35s; } .box .inner { padding: 10px; position: relative; } .box a { display: block; width: 100%; height: auto; position: relative; overflow: hidden; } .box img { width: calc(100% + 50px); max-width: calc(100% + 50px); transition: opacity 0.35s, transform 0.35s; transform: translate3d(-40px, 0, 0); } .box a::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0