pug+scss实现三维可交互立方体盒子运动动画效果代码
代码语言:html
所属分类:动画
代码描述:pug+scss实现三维可交互立方体盒子运动动画效果代码,完全采用pug结合scss代码实现,通过插件实时转换成html及css代码输出渲染。
代码标签: pug scss 三维 交互 立方体 盒子 运动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <style type = 'text/scss'> // Custom param *** START $power: 20; $defaultRotateX: 0; $defaultRotateY: 0; $defaultRotateZ: 0; $perspective: 500px; // Custom param *** END // Your world *** START .abc { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background: #000; color: #fff; font-family: 'Barlow Semi Condensed', sans-serif; } .box { .surface { width: 100px; height: 100px; position: absolute; top: -50px; left: -50px; background: rgba(#000, 1); // border: 1px solid #fff; box-sizing: border-box; backface-visibility: hidden; &.-a { transform: translateZ(50px); } &.-b { transform: rotateX(180deg) translateZ(50px); } &.-c { transform: rotateY(90deg) translateZ(50px); } &.-d { transform: rotateY(-90deg) translateZ(50px); } &.-e { transform: rotateX(90deg) translateZ(50px); } &.-f { transform: rotateX(-90deg) translateZ(50px); } } @for $i from 1 through 100 { &:nth-child(#{$i}) { $size: random(100) / 100 + 0.2; transform: translate3d(random(1000) - 500px, random(1000) - 500px, random(1000) - 500px) scale3d($size, $size, $size); .rotate { &.-x { animation: rotateX random(10000) + 2000ms linear infinite; } &.-y { animation: rotateY random(10000) + 2000ms linear infinite; } &.-z { animation: rotateZ random(10000) + 2000ms linear infinite; } } $duration: random(50000) + 2000ms; $delay: random(50000) * -1ms; .scale { animation: scale $duration / 2 $delay ease infinite alternate; } .translate { &.-x { animation: translateX $duration $delay linear infinite; } &.-y { animation: translateY $duration $delay linear infinite; } &.-z { animation: translateZ $duration $delay linear infinite; } } } } } @keyframes rotateX { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(360deg); } } @keyframes rotateY { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @keyframes rotateZ { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @keyframes scale { 0% { transform: scale3d(0, 0, 0); } 100% { transform: scale3d(1, 1, 1); } } @keyframes translateX { 0% { transform: translateX(0); } 100% { transform: translateX(1000px); } } // Your world *** END // Template *** START div { transform-style: preserve-3d; } body { display: grid; place-items: center; height: 100vh; overflow: hidden; } .container { position: relative; display: grid; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0