css实现三维动态画册效果代码
代码语言:html
所属分类:画廊相册
代码描述:css实现三维动态画册效果代码
下面为部分代码预览,完整代码请点击下载或在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> body { perspective: 500px; perspective-origin: 50% 30%; font-family: 'Open Sans', sans-serif; font-size: 16px; background: #E3DFD2; color: #585247; } h1.title { text-align: center; margin: 200px auto 50px; font-weight: normal; text-transform: uppercase; width: 900px; } #zoetrope { position: relative; width: 900px; height: 111px; margin: 100px auto; transform-style: preserve-3d; animation: zoetrope 3s steps(35) infinite; } #zoetrope div { position: absolute; width: 100px; height: 111px; left: calc(50% - 50px); bottom: 50%; transform-origin: 50% 0; background-image: url("//repo.bfw.wiki/bfwrepo/images/zeotrope.jpg"); background-size: 1200px 111px; background-repeat: no-repeat; transform-style: preserve-3d; } #zoetrope div:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 50% 100%; transform: rotateX(90deg) translatez(-3px) translateY(-5px); box-shadow: inset 0px -100px 100px -100px #585247; } #zoetrope div:nth-child(0) { transform: rotateY(0deg) translateZ(-300px); background-position: 100px 0; } #zoetrope div:nth-child(1) { transform: rotateY(30deg) translateZ(-300px); background-position: 0px 0; } #zoetrope div:nth-child(2) { transform: rotateY(60deg) translateZ(-300px); background-position: -100px 0; } #zoetrope div:nth-child(3) { transform: rotateY(90deg) translateZ(-300.........完整代码请登录后点击上方下载按钮下载查看
网友评论0