SVG+css实现泵送立方体伸缩动画效果代码
代码语言:html
所属分类:动画
代码描述:SVG+css实现泵送立方体伸缩动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html,body{ height: 100%; width: 100%; overflow: hidden; } body{ display: flex; justify-content: center; align-items: center; background-color: #E0E8EA; } #cubes{ max-height: 640px; max-width: 640px; width: 80vh; } </style> </head> <body> <svg id="cubes" width="640" height="640" viewBox="0 0 640 640" fill="none" xmlns="http://www.w3.org/2000/svg"> <use href="#pump1" x="0" y="0"/> <use href="#pump3" x="192" y="0"/> <use href="#pump1" x="384" y="0"/> <use href="#pump2" x="0" y="128"/> <use href="#pump1" x="192" y="128"/> <use href="#pump3" x="384" y="128"/> <use href="#pump4" x="0" y="256"/> <use href="#pump2" x="192" y="256"/> <use href="#pump4" x="384" y="256"/> <use href="#pump1" x="0" y="384"/> <use href="#pump2" x="192" y="384"/> <use href="#pump3" x="384" y="384"/> <defs> <g id="pump1"> <path fill="url(#p0lg)"> <animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="ease-in-out" keyTimes="0;0.1;0.4;.5;1" values="M64 96 L128 128 L128 128 L64 96Z; M64 64 L128 96 L128 128 L64 96Z; M64 64 L128 96 L128 128 L64 96Z; M64 96 L128 128 L128 128 L64 96Z; M64 96 L128 128 L128 128 L64 96Z;"/> </path> <path fill="url(#p1lg)"> <animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="ease-in-out" keyTimes="0;0.1;0.4;.5;1" values="M192 96 L128 128 L128 128 L192 96Z; M192 64 L128 96 L128 128 L192 96Z; M192 64 L128 96 L128 128 L192 96Z; M192 96 L128 128 L128 128 L192 96Z; M192 96 L128 128 L128 128 L192 96Z"/> </path> <path fill="url(#p2lg)"> <animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="ease-in-out" keyTimes="0;0.1;0.4;.5;1" values="M64 96 L64 96 L128 128 L192 96 L192 96 L128 128Z; M64 96 L48 116 L112 148 L176 116 L192 96 L128 128Z; M64 96 L48 116 L112 148 L176 116 L192 96 L128 128Z; M64 96 L64 96 L128 128 L192 96 L192 96 L128 128Z; M64 96 L64 96 L128 128 L192 96 L192 96 L128 128Z"/> </path> </g> <g id="pump2"> <path fill="url(#p0lg)"> <animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="ease-in-out" keyTimes="0;0.1;0.4;.5;1" begin="2s" values="M64 96 L128 128 L128 128 L64 96Z; M64 64 L128 96 L128 128 L64 96Z; M64 64 L128 96 L128 128 L64 96Z; M64 96 L128 128 L128 128 L64 96Z; M64 96 L128 128 L128 128 L64 96Z;"/> </path> <path fill="url(#p1lg)"> <animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="ease-in-out" keyTimes="0;0.1;0.4;.5;1" begin="2s" values="M192 96 L128 128 L128 128 L192 96Z; M192 64 L128 96 L128 128 L192 96Z; M192 64 L128 96 L128 128 L192 96Z; M192 96 L128 128 L128 128 L192 96Z; M192 96 L128 128 L128 128 L192 96Z"/> </path> <path fill="url(#p2lg)"> <animate attributeName="d" dur="4s" repeatCount="indefinite" calcMode="ease-in-out" keyTimes="0;0.1;0.4;.5;1" begin="2s" values="M64 96 L64 96 L128 128 L192 96 L192 96 L128 128Z; M64 96 L48 116 L112 148 L176 116 L192 96 L128 128Z; M64 96 L48 116 L112 148 L176 116 L192 96 L128 128Z; M64 96 L64 96 L128 128 L192 96 L192 96 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0