css+js实现立方体摆动波纹动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现立方体摆动波纹动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; transform-style: preserve-3d; touch-action: none; } :root { --bg: hsl(210 20% 12%); --size: 40; --rotation-y: -35; --rotation-x: -45; } body { display: grid; place-items: center; min-height: 100vh; background: var(--bg); font-family: 'Google Sans', sans-serif, system-ui; } .scene { position: relative; transform: rotateX(calc(var(--rotation-y, 0) * 1deg)) rotateY(calc(var(--rotation-x, 0) * 1deg)) rotateX(0deg); } .scene-wrapper { --size: 50; height: calc(var(--size) * 1vmin); aspect-ratio: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(calc((v.........完整代码请登录后点击上方下载按钮下载查看
网友评论0