flipping.web实现一个带缩率图水平轮播幻灯片效果代码
代码语言:html
所属分类:选项卡
代码描述:flipping.web实现一个带缩率图水平轮播幻灯片效果代码
代码标签: flipping.web 幻灯片 水平
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img { max-width: 100%; } #app { width: 90%; height: 85%; overflow: hidden; } .ui-big-images { position: absolute; height: 100%; width: 100%; overflow: hidden; display: flex; } .ui-big-image { width: 100%; margin-right: -100%; } .ui-big-image img { -o-object-fit: cover; object-fit: cover; -o-object-position: center 20%; object-position: center 20%; width: 100%; height: 100%; display: block; } @media (max-height: 600px) { .ui-big-image img { -o-object-position: center center; object-position: center center; } } .ui-thumbnails { position: absolute; width: 100%; bottom: 0; left: 0; background-color: #fff; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0 1rem; padding-top: .5rem; padding-right: 45%; padding-right: calc( 45% + .5rem ); } .ui-thumbnail { display: block; margin-right: .5rem; padding: .5rem 0; cursor: pointer; } .ui-cuticle { background-color: #D4A12D; position: absolute; bottom: 0; height: .25rem; width: 100%; } .ui-thumbnail > img { width: auto; } .ui-content { position: absolute; width: 40%; right: 5%; bottom: 0; } .ui-articles { background: #493e56; color: white; display: flex; align-items: stretch; overflow: hidden; } .ui-article { padding: 1.5rem; width: 100%; margin-right: -100%; display: flex; flex-direction: column; justify-content: center; } .ui-paragraph { margin: 0; font-size: .7rem; line-height: 1.7; } .ui-nav { position: absolute; right: 0; bottom: 100%; background: inherit; } .ui-nav button { background: #493e56; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: .5em; width: 2em; color: #FFF; font-family: monospace; transition: inherit; transition-duration: 300ms; } .ui-nav button:hover, .ui-nav button:focus { background: #D4A12D; outline: none; } .ui-nav button:active { outline: none; -webkit-transform: translateY(0.25em); transform: translateY(0.25em); transition-duration: 100ms; } .ui-heading { margin: 0; margin-bottom: 0.5rem; font-size: 1rem; font-weight: normal; } .ui-heading:before { content: 'Animator'; font-size: .5rem; text-transform: uppercase; display: block; margin-bottom: .5rem; letter-spacing: 1px; } /* ---------------------------------- */ .ui-big-image { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .ui-big-image img { -webkit-transform: scale(0.85); transform: scale(0.85); } .ui-big-image[data-active] ~ .ui-big-image { -webkit-transform: translateX(100%); transform: translateX(100%); } .ui-big-image[data-active] { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } .ui-big-image[data-active] img { -webkit-transform: scale(1); transform: scale(1); } /* ---------------------------------- */ .ui-article { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .ui-article:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #D4A12D; opacity: 1; transition-duration: 0.35s; z-index: 1; } .ui-article[data-active] ~ .ui-article { -webkit-transform: translateX(100%); transform: translateX(100%); } .ui-article[data-active] { -webkit-transform: translateX(0%); transform: translateX(0%); } .ui-article[data-active]:before { opacity: 0; } /* ---------------------------------- */ .ui-thumbnail > img { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition-duration: 0.35s; } .ui-thumbnail:active > img { -webkit-transform: scale(0.9); transform: scale(0.9); transition-duration: 100ms; } .ui-thumbnail:focus { outline: none; } .ui-cuticle { display: none; } .ui-thumbnail[data-active] > img, .ui-thumbnail:hover > img { -webkit-filter: grayscale(0%); filter: grayscale(0%); } .ui-thumbnail[data-active] .ui-cuticle { display: block; } /* ---------------------------------- */ body { display: flex; justify-content: center; align-items: center; background-color: #1A130C; } *, *:before, *:after { box-sizing: border-box; position: relative; transition-property: opacity, -webkit-transform, -webkit-filter; transition-property: transform, opacity, filter; transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter; transition-duration: 0.7s, 0.7s, 0.7s; transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1); } body, html { height: 100%; width: 100%; padding: 0; margin: 0; } </style> </head> <body> <div id="app" data-state="0"> <div class="ui-big-images"> <div class="ui-big-image" data-key="0"> <img src="//repo.bfw.wiki/bfwrepo/image/5e1c022531682.png" alt=""/> </div> <div class="ui-big-image" data-key="1"> <img src="//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png" alt=""/> </div> <div class="ui-big-image" data-key="2"> <img src="//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png" alt=""/> </div> <div class="ui-big-image" data-key="3"> <img src="//repo.bfw.wiki/bfwrepo/image/5eedde0ecfa60.png" alt=""/> </div> <div class="ui-big-image" data-key="4"> <img src="//repo.bfw.wiki/bfwrepo/image/5fb4a572de209.png" alt=""/> </div> <div class="ui-big-image" data-key="5"> <img src="//repo.bfw.wiki/bfwrepo/image/5fc1a9b3bd22e.png" alt=""/> </div> </div> <div class="ui-thumbnails"> <div class=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0