gsap实现三维数据集盒子加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap实现三维数据集盒子加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --cube-width: 50px; --cube-height: var(--cube-width); --cube-depth: var(--cube-width); --face-color: rgba(255,0,0,0); --border-color: rgba(255,0,0,0); --in-color: #ED213A; --mid-color: #c7eafd; --out-color: #0780ba; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background: black; overflow: hidden; font-size: 10px; background-image: linear-gradient(140deg, #06374e 0%, #02131c 80%); } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } /* ========================================================== MIXINS ========================================================== */ .container { display: flex; align-items: center; justify-content: center; height: 100%; margin: auto; visibility: hidden; } .scene { display: flex; align-items: center; height: 100%; transform-style: preserve-3d; background-blend-mode: overlay; } /* ========================================================== CUBES ========================================================== */ .cubes { transform-style: preserve-3d; transform: rotateX(-35deg) rotateY(45deg); } .cube { position: relative; width: var(--cube-width); height: var(--cube-height); transform-style: preserve-3d; transform-style: preserve-3d; } .cube .face { position: absolute; left: 0; top: 0; background: var(--face-color); } .cube .face--front { width: var(--cube-width); height: var(--cube-height); transform: translateZ(calc(var(--cube-depth)/2)); } .cube .face--back { width: var(--cube-width); height: var(--cube-height); transform: translateZ(calc(var(--cube-depth)/2 *-1)) rotateY(180deg); } .cube .face--left { width: var(--cube-depth); height: var(--cube-height); transform: translateX(calc(var(--cube-depth)/2 *-1)) rotateY(-90deg); } .cube .face--right { width: var(--cube-depth); height: var(--cube-height); transform: translateX(calc(var(--cube-width) - var(--cube-depth)/2)) rotateY(90deg); } .cube .face--top { width: var(--cube-width); height: var(--cube-depth); transform: translateY(calc(var(--cube-depth)/2 *-1)) rotateX(90deg); } .cube .face--bottom { width: var(--cube-width); height: var(--cube-depth); transform: translateY(calc(var(--cube-height) - var(--cube-depth)/2)) rotateX(-90deg); } .cube .face { border: none; } .cube .face--left .face__wrap { transform: rotateZ(90deg); } .cube .face--right .face__wrap { transform: rotateZ(-90deg); } .cube .face--top .face__wrap { transform: rotateZ(-90deg); } .cube .face--bottom .face__wrap { transform: rotateZ(-90deg); } .face__wrap { display: flex; justify-content: space-around; width: 100%; height: 100%; transform-style: preserve-3d; } .face__panel { flex: 1 0 auto; width: 20%; background: var(--in-color); transform: scaleY(0); opacity: 0; box-shadow: 0px 0px 40px rgba(199, 234, 253, 0.3); } .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: white; 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: white; content: ""; transition: width 0.3s; } .collection__link:hover span { width: 100%; } </style> </head> <body > <div class="container"> <div class="scene"> <div class="cubes"> <div class="cube"> <div class="face face--front"> <div class="face__wrap"> <div class="face__panel"></div> <div class="face__panel"></div> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0