css+js实现花瓣旋转变形合并成圆动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现花瓣旋转变形合并成圆动画效果代码
代码标签: css js 花瓣 旋转 变形 合并 成圆 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ box-sizing: border-box; } body{ margin: 0px; height: 100vh; width: 100vw; overflow: hidden; background: #000000; display: grid; place-items: center; } @keyframes spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } #wrapper{ animation: spin 4000ms ease-in-out infinite; height: 90vmin; width: 90vmin; position: relative; scale: .5; } #wrapper > .box{ height: 50%; width: 50%; position: absolute; transition: all ease-in-out 800ms; } #wrapper > .box:nth-child(1){ background: #0A2647; z-index: 2; } #wrapper > .box:nth-child(2){ background: #205295; z-index: 1; } #wrapper > .box:nth-child(3){ background: #144272; z-index: 2; } #wrapper > .box:nth-child(4){ background: #2C74B3; z-index: 1; } #wrapper[data-configuration="1"] > .box:nth-child(1) { left: 0%; top: 0%; height: 50%; width: 50%; border-radius: 100% 0 0 0; } #wrapper[data-configuration="1"] > .box:nth-child(2) { right: 0%; top: 0%; height: 50%; width: 50%; border-radius: 0 100% 0 0; } #wrapper[data-configuration="1"] > .box:nth-child(3) { left: 0%; bottom: 0%; height: 50%; width: 50%; border-radius: 0 0 0 100%; } #wrapper[data-configuration="1"] > .box:nth-child(4) { right: 0%; bottom: 0%; height: 50%; width: 50%; border-radius: 0 0 100%; } #wrapper[data-configuration="2"] > .box:nth-child(1) { left: 50%; top: 0%; height: 50%; width: 50%; border-radius: 100% 0 100% 0; } #wrapper[data-configuration="2"] > .box:nth-child(2) { rig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0