css实现一个可滚动的三维照片墙效果代码
代码语言:html
所属分类:画廊相册
代码描述:css实现一个可滚动的三维照片墙效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url("https://fonts.googleapis.com/css?family=Raleway:100i,400"); @media (min-width: 0px) { body { perspective: 250px; } } @media (min-width: 700px) { body { perspective: 500px; } } @media (min-width: 1200px) { body { perspective: 1000px; } } @media (min-width: 1600px) { body { perspective: 2000px; } } body { background: #090909; transform-style: preserve-3d; overflow: hidden; } .header { position: absolute; display: flex; flex-direction: column; align-items: center; right: 0; top: 0; color: #CCC; padding: 2em; font-family: "Raleway"; z-index: 5; font-size: 20px; letter-spacing: 0.25em; text-align: center; } .header h1 { font-weight: 400; font-size: 1em; margin: 0 0 5px 0; text-transform: uppercase; } .header span { padding: 0.25em; font-size: 0.75em; font-style: italic; text-transform: lowercase; } .social { display: flex; margin-top: 0.5em; } .social a { position: relative; width: 1.5em; height: 1.5em; margin: 0px 0.75em; } .social a img { width: 100%; height: 100%; } #wall { position: relative; transform-origin: left center; transform: rotateY(45deg); width: 100%; height: 100%; -webkit-animation: 10s linear move; animation: 10s linear move; } #wall .row { position: relative; display: flex; height: 250px; margin-bottom: 10px; } #wall .row img { height: 100%; margin: 5px; } #wall .row .frame { position: relative; height: 100%; } #wall .row .frame .reflection { position: absolute; height: 100%; transform: rotateX(180deg) translateY(-10px); opacity: 0.25; } #wall .row .frame::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#090909 75%, transparent); transform-origin: bottom center; transform: r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0