svg+css实现星空立方体旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现星空立方体旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body,html{ width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } body{ background-color: #141417; display: flex; justify-content: center; align-items: center; } svg{ height: 100%; width: 100%; } </style> </head> <body> <svg width="512" height="512" viewBox="0 0 512 512" fill="none" overflow="hidden" xmlns="http://www.w3.org/2000/svg"> <use href="#cube" x="128" y="320" stroke-width="2" opacity="0.3"> <animate attributeName="stroke" dur="6s" repeatCount="indefinite" values="#FF9AA2;#FFB7B2;#FFDAC1;#E2F0CB;#B5EAD7;#C7CEEA;#FF9AA2"/> </use> <rect width="512" height="512" y="384" fill="url(#fade)"/> <use href="#cube" x="128" y="128" stroke-width="2"> <animate attributeName="stroke" dur="6s" repeatCount="indefinite" values="#FF9AA2;#FFB7B2;#FFDAC1;#E2F0CB;#B5EAD7;#C7CEEA;#FF9AA2"/> </use> <defs> <!-- EVERYTHING TOGETHER --> <g id="cube"> <use href="#cube_outline" stroke-linejoin="round" stroke-width="16" fill="url(#stars)"/> <use href="#cube_base" stroke-width=".5"/> <use href="#cube_outline" stroke-linejoin="round" stroke-width="6" stroke="#141417"/> </g> <g id="cube_outline"> <path> <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9" values="M10 64 L128 0 L246 64 L246 192 L128 256 L10 192Z; M40 20 L216 20 L216 108 L216 236 L40 236 L40 172Z; M216 20 L40 20 L40 108 L40 236 L216 236 L216 172Z; M246 64 L128 0 L10 64 L10 192 L128 256 L246 192Z"/> </path> </g> <g id="cube_base"> <path fill="#fff1"> <!-- TOP SIDE --> <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9" values="M10 64 L128 0 L246 64 L128 128Z; M40 20 L216 20 L216 108 L40 108Z; M128 0 L246 64 L128 128 L10 64Z"/> </path> <path> <!-- LEFT SIDE --> <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9" values="M10 64 L128 128 L128 256 L10 192Z; M40 20 L40 108 L40 236 L40 172Z; M216 20 L216 108 L216 236 L216 172Z; M246 64 L128 128 L128 256 L246 192Z"/> <animate attributeName="fill" dur="1.5s" repeatCount="indefinite" keyTimes="0;0.5;0.5;1" values="#fff0;#fff0;#fff2;#fff2"/> </path> <path fill="#407080"> <!-- LEFT SIDE --> <animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9" values="M246 64 L128 128 L128 256 L246 192Z; M216 108 L40 108 L40 236 L216 236Z; M128 128 L10 64 L10 192 L128 256Z"/> <animate attributeName="fill" dur="1.5s" repeatCount="indefinite" keyTimes="0;0.5;1" values="#fff2;#fff1;#fff0"/> </path> </g> <linearGradient id="fade" gradientTransform="rotate(90)"> <stop offset="0" stop-color="#14141700"/> <stop offset="0.25" stop-color="#141417ff"/> </linearGradient> <linearGradient id="sky" gradientTransform="rotate(90)"> <stop offset="0.5" stop-color="#141417"/> <stop offset="1" stop-color="#40354a"/> </linearGradient> <!-- STARS PATTERN --> <pattern id="stars" x="0" y="0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0