gasp带序列号的幻灯片效果
代码语言:html
所属分类:幻灯片
代码描述:gasp带序列号的幻灯片效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-family: 'Roboto', sans-serif; font-size: 62.5%; } @media only screen and (max-width: 800px) { html { font-size: 57%; } } body { background-color: #000; color: #fff; padding: 8rem; } @media only screen and (max-width: 1000px) { body { padding: 0; } } .container { position: relative; overflow: hidden; border-radius: 5rem; } @media only screen and (max-width: 1000px) { .container { border-radius: 0; } } .slider { display: -webkit-box; display: flex; width: 500%; height: 55rem; -webkit-transition: all .25s ease-in; transition: all .25s ease-in; -webkit-transform: translateX(0); transform: translateX(0); } @media only screen and (max-width: 1000px) { .slider { height: 100vh; } } .slider .box { height: 100%; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); -webkit-box-align: center; align-items: center; overflow: hidden; position: relative; } @media only screen and (max-width: 650px) { .slider .box { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); } } .slider .box .bg { padding: 2rem; background-color: rgba(0, 0, 0, 0.2); width: 55%; -webkit-transform: skewX(7deg); transform: skewX(7deg); position: absolute; height: 100%; left: -10%; padding-left: 20rem; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } @media only screen and (max-width: 800px) { .slider .box .bg { width: 65%; } } @media only screen and (max-width: 650px) { .slider .box .bg { width: 100%; left: 0; bottom: 0; height: 54%; -webkit-transform: skewX(0deg); transform: skewX(0deg); } } .slider .box .bg::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: inherit; pointer-events: none; -webkit-transform: skewX(10deg); transform: skewX(10deg); } @media only screen and (max-width: 650px) { .slider .box .bg::before { width: 120%; bottom: 0; -webkit-transform: skewX(0deg); transform: skewX(0deg); } } .slider .box .details { padding: 5rem; padding-left: 10rem; z-index: 100; grid-column: 1 / span 1; grid-row: 1 / -1; } @media only screen and (max-width: 650px) { .slider .box .details { grid-row: 2 / span 1; grid-column: 1 / -1; text-align: center; padding: 2rem; -webkit-transform: translateY(-9rem); transform: translateY(-9rem); } } .slider .box .details h1 { font-size: 3.5rem; font-weight: 500; margin-bottom: .5rem; } .slider .box .details p { display: inline-block; font-size: 1.3rem; color: #B5B4B4; margin-bottom: 2rem; margin-right: 5rem; } @media only screen and (max-width: 800px) { .slider .box .details p { margin-right: 0; } } .slider .box .details button { padding: 1rem 3rem; color: #fff; border-radius: 2rem; outline: none; border: none; cursor: pointer; -webkit-transition: all .3s ease; transition: all .3s ease; } .slider .box .details button:hover { opacity: .8; } .slider .box .details button:focus { outline: none; border: none; } .slider .box1 { background-color: #500033; } .slider .box1 .illustration .inner { background-color: #FF0077; } .slider .box1 .illustration .inner::after, .slider .box1 .illustration .inner::before { background-color: rgba(255, 0, 119, 0.4); } .slider .box1 button { background-color: #FF0077; } .slider .box2 { background-color: #000050; } .slider .box2 .illustration .inner { background-color: #0033FF; } .slider .box2 .illustration .inner::after, .slider .box2 .illustration .inner::before { background-color: rgba(0, 51, 255, 0.4); } .slider .box2 button { background-color: #0033FF; } .slider .box3 { background-color: #00501D; } .slider .box3 .illustration .inner { background-color: #00FF44; } .slider .box3 .illustration .inner::after, .slider .box3 .illustration .inner::before { background-color: rgba(0, 255, 68, 0.4); } .slider .box3 button { background-color: #00FF44; } .slider .box4 { background-color: #554D00; } .slider .box4 .illustration .inner { background-color: #FF4E00; } .slider .box4 .illustration .inner::after, .slider .box4 .illustration .inner::before { background-color: rgba(255, 78, 0, 0.4); } .slider .box4 button { background-color: #FF4E00; } .slider .box5 { background-color: #300050; } .slider .box5 .illustration .inner { background-color: #8000FF; } .slider .box5 .illustration .inner::after, .slider .box5 .illustration .inner::before { background-color: rgba(128, 0, 255, 0.4); } .slider .box5 button { background-color: #8000FF; } .slider .illustration { grid-column: 2 / -1; grid-row: 1 / -1; justify-self: center; } @media only screen and (max-width: 650px) { .slider .illustration { grid-row: 1 / span 1; grid-column: 1 / -1; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } } .slider .illustration div { height: 25rem; width: 18rem; border-radius: 3rem; background-color: #FF0077; position: relative; -webkit-transform: skewX(-10deg); transform: skewX(-10deg); } @media only screen and (max-width: 800px) { .slider .illustration div { height: 20rem; width: 15rem; } } .slider .illustration div::after, .slider .illustration div::before { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 3rem; top: 0; left: 0; } .slider .illustration div::after { -webkit-transform: translate(4rem, -1rem); transform: translate(4rem, -1rem); } .slider .illustration div::before { -webkit-transform: translate(2rem, -2rem); transform: translate(2rem, -2rem); } .prev, .next, .trail { z-index: 10000; position: absolute; } .prev, .next { width: 4rem; cursor: pointer; opacity: .2; -webkit-transition: all .3s ease; transition: all .3s ease; } @media only screen and (max-width: 650px) { .prev, .next { display: none; } } .prev:hover, .next:hover { opacity: 1; } .prev { top: 50%; left: 2%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .next { top: 50%; right: 2%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .trail { bottom: 5%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 60%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; text-align: center; font-size: 1.5rem; } @media only screen and (max-width: 650px) { .trail { width: 90%; bottom: 13%; } } .trail div { padding: 2rem; border-top: 3px solid #fff; cursor: pointer; opacity: .3; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .trail div:hover { opacity: .6; } @media only screen and (max-width: 650px) { .trail div { padding: 1rem; } } .active { opacity: 1 !important; } </style> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="slider"> <div class="box1 box"> <div class="bg"></div> <div class="details"> <h1>I'm the first Box</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus. Donec scelerisque ipsum diam, ac mattis orci pellentesque eget. </p> <button>Check Now</button> </div> <div class="illustration"><div class="inner"></div></div> </div> <div class="box2 box"> <div class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0