照片墙滚动效果
代码语言:html
所属分类:画廊相册
代码描述:照片墙滚动效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } body { font-family: "Special Elite", Georgia, serif; background: #283593; } a { color: inherit; text-decoration: none; border-bottom: 0.75vw solid; } p { margin: 0; text-align: center; font-size: calc(0.5rem + 0.5vw); } h1 { margin: 0; font-size: calc(7vw + 20px); position: absolute; left: 5%; bottom: 5%; color: magenta; } h2 { font-size: 6vw; color: magenta; text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); } .defilee__main { position: relative; margin: 0 auto; } .defilee__outer { width: 100%; height: 100vh; max-height: 100vh; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-perspective: 0.5px; perspective: 0.5px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; } .defilee__ctnr { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; margin: 0 auto; } .defilee__div { position: relative; -webkit-transform: translateZ(-0.1px) scale(1.4) translateX(30px) translateY(5vh); transform: translateZ(-0.1px) scale(1.4) translateX(30px) translateY(5vh); } .defilee__div:not(.defilee__div--text) { width: 25vw; margin: 0 5vw; background: white; padding: 0.75vw; border-radius: 4px; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 1); } .defilee__div--text { margin: 0 0 0 10vw; -webkit-transform: translateZ(-0.25px) scale(1.4) translateX(60px) translateY(-5vh); transform: translateZ(-0.25px) scale(1.4) translateX(60px) translateY(-5vh); -webkit-animation: zoom infinite 1s; animation: zoom infinite 1s; } .defilee__div--special { -webkit-transform: translateZ(-0.2px) scale(1.4) translateX(30px) translateY(20vh); transform: translateZ(-0.2px) scale(1.4) translateX(30px) translateY(20vh); } .defilee__div--special1 { -webkit-transform: translateZ(-0.25px) scale(1.4) translateX(-0.3vw) translateY(0); transform: translateZ(-0.25px) scale(1.4) translateX(-0.3vw) translateY(0); } .defilee__div--special2 { -webkit-transform: translateZ(-0.3px) scale(1.5) translateX(-0.5vw) translateY(-5vh); transform: translateZ(-0.3px) scale(1.5) translateX(-0.5vw) translateY(-5vh); } .defilee__div--special3 { -webkit-transform: translateZ(-0.5px) scale(1.5) translateX(-30px) translateY(-30vh); transform: translateZ(-0.5px) scale(1.5) translateX(-30px) translateY(-30vh); } .defilee__div--special4 { -webkit-transform: translateZ(-0.65px) scale(3) translateX(30px) translateY(-10vh); transform: translateZ(-0.65px) scale(3) translateX(30px) translateY(-10vh); } .defilee__ctnr { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); will-change: transform; -webkit-animation: slide 25s 0.7s linear infinite; animation: slide 25s 0.7s linear infinite; } @-webkit-keyframes slide { 100% { -webkit-transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0); } } @keyframes slide { 100% { -webkit-transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0); } } .defilee__div--special1.first { -webkit-animation: vertical infinite 5s -2s; animation: vertical infinite 5s -2s; } @-webkit-keyframes vertical { 50% { -webkit-transform: translateZ(-0.25px) scale(1.6) translateX(-0.3vw) translateY(-5vh); transform: translateZ(-0.25px) scale(1.6) translateX(-0.3vw) translateY(-5vh); } } @keyframes vertical { 50% { -webkit-transform: translateZ(-0.25px) scale(1.6) translateX(-0.3vw) translateY(-5vh); transform: translateZ(-0.25px) scale(1.6) translateX(-0.3vw) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0