div+css实现三维图片层叠堆积幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:div+css实现三维图片层叠堆积幻灯片切换效果代码
代码标签: div css 三维 图片 层叠 堆积 幻灯片 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { height: 100vh; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; } .img-container { position: relative; height: 500px; width: 700px; perspective: 500px; transform-style: preserve-3d; } .box { box-shadow: 0 0 10px rgb(0 0 0 / 30%); width: 600px; height: 440px; border-radius: 25px; overflow: hidden; border: 1px solid #bbb; position: absolute; top: 50%; transition: 800ms ease-in-out; } .box img { width: 100%; height: 100%; } .box:first-of-type { z-index: 5; opacity: 0; left: 15%; transform: translate(-50%, -50%) rotateY(-10deg); } .box:nth-of-type(2) { opacity: 1; left: 20%; transform: translate(-50%, -50%) rotateY(-10deg); z-index: 5; } .box:nth-of-type(3) { left: 25%; opacity: 0.75; color: #eee; z-index: 10; transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-50px); } .box:nth-of-type(4) { z-index: 5; opacity: 0.5; left:30%; transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-100px); } .box:nth-of-type(5) { z-index: 2; opacity: 0.25; left: 35%; transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-150px); } .box:nth-of-type(6) { z-index: 2; opacity: 0.0; left: 40%; transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-200px); } </style> </head> <body > <div class="img-container"> <div class="box"> <img src="//repo.bfw.wiki/bfw.........完整代码请登录后点击上方下载按钮下载查看
网友评论0