gsap实现彩色方块堆叠立体动画效果
代码语言:html
所属分类:动画
代码描述:gsap实现彩色方块堆叠立体动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .circle { width: 40vmin; height: 40vmin; } .inner, .outer { position: absolute; border-radius: 5%; } .outer { background: blueviolet; box-shadow: 0 0 40px 0 rgba(139, 139, 15, 1.0); transform: rotate(45deg); } .inner:nth-child(9) { transform: scale(.1) rotate(45deg); background: red; } .inner:nth-child(8) { transform: scale(.2); background: orange; } .inner:nth-child(7) { transform: scale(.3) rotate(45deg); background: yellow; } .inner:nth-child(6) { transform: scale(.4); background: gold; } .inner:nth-child(5) { transform: scale(.5) rotate(45deg); background: green; } .inner:nth-child(4) { transform: scale(.6); background: blue; } .inner:nth-child(3) { transform: scale(.7) rotate(45deg); background: indigo; } .inner:nth-child(2) { transform: scale(.8); background: violet; } body { min-height: 100vh; display: grid; place-items: center; background: lightgoldenrodyellow; overflow: hidden; } * { padding: 0; margin: 0; box-siz.........完整代码请登录后点击上方下载按钮下载查看
网友评论0