svg+css实现机器人黄金眼睛转动动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现机器人黄金眼睛转动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #3E13AF; } svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 500px; max-width: 500px; min-height: 300px; min-width: 300px; } </style> </head> <body translate="no"> <svg id="svgg" viewBox="0 0 1000 1000"> <circle cx="500" cy="500" r="500" fill="gold" /> <circle cx="500" cy="500" r="308.33279703187185" fill="#C6A700" /> <path d="M 500 500 M 565 500 l -0.64 9.07 l 9.49 3.99 l 8.61 7.55 l -6.11 16.75 l -11.45 0.23 l -9.83 -3.06 l -5.27 7.25 l -6.32 6.54 l 4.71 9.15 l 1.73 11.33 l -15.44 8.89 l -8.92 -7.18 l -5.56 -8.66 l -8.71 2.16 l -9.04 0.95 l -2.28 10.04 l -5.94 9.79 l -17.55 -3.11 l -2.22 -11.24 l 1.31 -10.21 l -8.06 -3.93 l -7.54 -5.09 l -8.2 6.23 l -10.84 3.68 l -11.45 -13.67 l 5.52 -10.03 l 7.57 -6.98 l -3.65 -8.2 l -2.5 -8.74 l -10.28 -0.5 l -10.68 -4.15 l 0.01 -17.82 l 10.69 -4.14 l 10.28 -0.49 l 2.47 -8.62 l 3.7 -8.3 l -7.55 -6.99 l -5.51 -10.05 l 11.46 -13.64 l 10.85 3.69 l 8.18 6.24 l 7.44 -5.01 l 8.18 -3.99 l -1.3 -10.21 l 2.24 -11.23 l 17.55 -3.09 l 5.93 9.8 l 2.26 10.04 l 8.92 0.94 l 8.83 2.2 l 5.57 -8.65 l 8.93 -7.17 l 15.43 8.92 l -1.75 11.32 l -4.72 9.14 l 6.23 6.46 l 5.34 7.35 l 9.83 -3.05 l 11.46 0.25 l 6.08 16.76 l -8.62 7.54 l -9.49 3.97 z m -70 0 a 1 1 0 0 0 10 0 a 1 1 0 0 0 -10 0" fill="#7659C3"> <animateTransform class="run" attributeName="transform" attributeType="XML" type="rotate" from="0 500 500" to="360 500 500" dur="9s" repeatCount="indefinite"/> </path> <g transform="rotate(0 500 500)"> <g id="smallGear"> <path d="M 493.55 408.56v400" s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0