js+css实现立体层叠堆叠图文幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现立体层叠堆叠图文幻灯片切换效果代码
代码标签: js css 立体 层叠 堆叠 图文 幻灯片 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; font-family: 'Montserrat', sans-serif; } html { font-size: 62.5%; } body { box-sizing: border-box; font-size: 1.6rem; background-color: rgb(24, 27, 30); color: #fff; display: grid; place-items: center; min-height: 100vh; } .carousel { position: relative; } .carousel__item { position: relative; height: 35rem; width: 25rem; border-radius: 3px; overflow: hidden; box-shadow: 0 1rem 4rem rgba(0,0,0,.5); position: absolute; transform: translate(-50%,-50%) scale(.1); z-index: 0; transition: all .2s linear; } .carousel__item img { width: 100%; min-height: 100%; object-fit: cover; } .carousel__item--main { transform: translate(-50%,-50%) scale(1); z-index: 2; cursor: pointer; } .carousel__item--left { transform: translate(-110%,-50%) scale(.9); z-index: 1; } .carousel__item--right { transform: translate(10%,-50%) scale(.9); z-index: 1; } .carousel__item--left img, .carousel__item--right img { filter: grayscale(80%); } .carousel__item--right:hover { transform: translate(10%,-50%) scale(1.2); z-index: 3; cursor: pointer; } .carousel__item--left:hover { transform: translate(-110%,-50%) scale(1.2); z-index: 3; cursor: pointer; } .carousel__item--main:hover { transform: translate(-50%,-50%) scale(1.2); } .carousel__item:hover > .carousel__text { opacity: 1; } .carousel__item:hover img { filter: grayscale(0%); } .carousel__text { position: absolute; bottom: 0; z-index: 4; opacity: 0; transition: opacity .2s; width: 100%; text-align: center; background-color: rgba(0,0,0,.5); padding: 2rem 1rem; color: #fff; } .carousel__btns { position: absolute; transform: translate(-50%, 22rem); display: flex; gap: 2rem; } .carousel__btn { background-color: transparent; height: 5rem; width: 5rem; border-radius: 50%; border:1px solid currentColor; color: #fff; cursor: pointer; } .carousel__btn svg { height: 1.8rem; width: 1.8rem; } .carousel__btn:hover { color: #aaa; } </style> </head> <body translate="no"> <div class="carousel"> <div class="carousel__item carousel__item--left"> <img src="//repo.bfw.wiki/bfwrepo/image/625a18709b084.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_330,h_500,/quality,q_90" alt="dog"> <div class="carousel__text"> <h3>Cute Puppy</h3> <p>Isn't it cute?!</p> </div> </div> <div class="carousel__item carousel__item--main"> <img src="//repo.bfw.wiki/bfwrepo/image/625a188caa9f1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_330,h_500,/quality,q_90" alt="dog"> <div class="carousel__text"> <h3>Cute Puppy</h3> <p>Isn't it cute?!</p> </div> </div> <div class="carousel__item carousel__item--right"> <img src="//repo.bfw.wiki/bfwrepo/image/625a18cd69bb2.png?x-oss-proce.........完整代码请登录后点击上方下载按钮下载查看
网友评论0