css+js实现三角条纹立体旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现三角条纹立体旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { background: #e4e4e4; overflow: hidden; font-size: 150px; } body * { position: absolute; left: 50%; top: 50%; } body::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.4; pointer-events: none; z-index: 999; } .cube { transform-style: preserve-3d; } .cube .face { width: 1em; height: 1em; margin: -0.5em -0.5em; background: rgba(228, 228, 228, 0.6); } .cube .face:nth-child(1) { transform: rotateY(0deg) translateZ(0.5em); } .cube .face:nth-child(2) { transform: rotateY(90deg) translateZ(0.5em); } .cube .face:nth-child(3) { transform: rotateY(180deg) translateZ(0.5em); } .cube .face:nth-child(4) { transform: rotateY(270deg) translateZ(0.5em); } .cube .face:nth-child(5) { transform: rotateX(810deg) translateZ(0.5em); } .cube .face:nth-child(6) { transform: rotateX(990deg) translateZ(0.5em); } .cube .face canvas { left: 0; top: 0; width: 100%; height: 100%; } </style> </head> <body > <div class="cube"> <div class="face"></div> <div class="face"></div> <div class="face"></div> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> <script > // You can play with these var lineWidth = 10,lineSpacing = 40; var color = '#383838'; var duration = 2.5,easingFactor = 3.5; var linesSize = 450; var lines = function () { var c = document.createElement('canvas'), ctx = c.getContext('2d'); c.width = c.height = li.........完整代码请登录后点击上方下载按钮下载查看
网友评论0