gsap实现三维盒子行走动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现三维盒子行走动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <style> :root { --cube-size: 120px; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background: white; background: radial-gradient(#ffffff 25%, #d5d3d5 75%); overflow: hidden; font-size: 10px; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .container { display: flex; align-items: center; justify-content: center; height: 100%; margin: auto; perspective: 800px; visibility: hidden; } .scene { transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(55deg); } .track { transform-style: preserve-3d; } .walker { transform-style: preserve-3d; position: relative; display: flex; } .walker--2 { transform-style: preserve-3d; transform: rotateX(180deg) translateY(-1px); } .walker--2 .face { opacity: 0.6; } .walker--2 .cube--1 .face { background: #f6edf0; } .walker--2 .cube--2 .face { background: #eaebf1; } .cube { position: relative; width: var(--cube-size); height: var(--cube-size); transform-style: preserve-3d; } .face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .face--front { transform: translateZ(calc(var(--cube-size)/2)); } .face--back { transform: translateZ(calc((var(--cube-size)*-1)/2)) rotateY(180deg); } .face--left { transform: translateX(calc((var(--cube-size)*-1)/2)) rotateY(-90deg); } .face--right { transform: translateX(calc(var(--cube-size)/2)) rotateY(90deg); } .face--top { transform: translateY(calc((var(--cube-size)*-1)/2)) rotateX(90deg); } .face--bottom { transform: translateY(calc(var(--cube-size)/2)) rotateX(-90deg); } .cube--1 .face { background: rgba(220, 24, 87, 0.8); } .cube--1 .face--front, .cube--1 .face--back { background: rgba(140, 25, 80, 0.8); } .cube--1 .face--left, .cube--1 .face--right { background: rgba(193, 36, 101, 0.8); } .cube--2 .face { background: rgba(75, 76, 89, 0.8); } .cube--2 .face--front, .cube--2 .face--back { background: rgba(17, 20, 23, 0.8); } .cube--2 .face--left, .cube--2 .face--right { background: rgba(54, 58, 66, 0.8); } .gsap-3-logo { width: 20vw; max-width: 150px; position: fixed; bottom: 15px; right: 15px; } /* ========================================================== Collection Linl ========================================================== */ .collection { position: fixed; z-index: 1000; top: 24px; right: 24px; display: flex; flex-direction: column; } .collection__link { position: relative; margin-bottom: 16px; color: black; font-family: Helvetica, sans-serif; text-decoration: none; font-size: 16px; } .collection__link span { display: block; position: absolute; bottom: -3px; left: 0; height: 1px; width: 10%; background-color: black; content: ""; transition: width 0.3s; } .collection__link:hover span { width: 100%; } </style> </head> <body> <div class="container"> <div class="scene"> <div class="track"> <div class="walker walker--1"> <div class="cube cube--1"> <div class="face face--front"></div> <div class="face face--back"></div> <div class="face face--left"></div> <div class="face face--right"></div> <div class="fac.........完整代码请登录后点击上方下载按钮下载查看
网友评论0