卡里幻灯切换效果
代码语言:html
所属分类:幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Kalli Hero</title> <style> html, body { height: 100%; } html { box-sizing: border-box; font-size: 62.5%; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Open Sans', sans-serif; background: #000; } /* ---- */ /* Tile */ /* ---- */ .tile { width: 100%; height: 100%; background: #000; position: relative; overflow: hidden; } .title { position: absolute; top: 50%; left: 10rem; color: #fff; font-size: 5.4rem; font-weight: 700; line-height: 1.3; text-shadow: 0 0.1rem 0 rgba(0,0,0, 0.15); letter-spacing: -0.02rem; overflow: hidden; } .title--last { opacity: 0; } .title__container { position: absolute; top: 0; left: 0; } .tile__img { position: absolute; width: 100%; height: auto; } /* --------- */ /* Next tile */ /* --------- */ .next-tile { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; border-top-left-radius: 0.1rem; border-bottom-left-radius: 0.1rem; overflow: hidden; padding: 0; background: transparent; border: 0; cursor: pointer; outline: none; z-index: 100; margin: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } .next-tile__details { width: 20rem; height: 33rem; background: #fff; text-align: left; display: flex; justify-content: flex-end; flex-direction: column; padding: 5rem 3.5rem; z-index: 10; position: relative; box-shadow: 0.3rem 0 1rem 0 rgba(0,0,0,0.26); } .next-tile__heading { margin-bottom: 4.5rem; text-transform: uppercase; color: #b3b3b3; font-weight: 600; display: block; } .next-tile__title { margin-bottom: 6rem; font-size: 2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.05rem; color: #222222; display: block; position: relative; } .next-tile__title__text { position: absolute; top: 0; left: 0; } .next-tile__title__text--last { opacity: 0; } .next-tile__arrow { fill: #b3b3b3; width: 2.4rem; display: block; } .next-tile__preview { width: 16rem; height: 33rem; background: #000; position: relative; overflow: hidden; display: block; } .next-tile__preview img.........完整代码请登录后点击上方下载按钮下载查看
网友评论0