TweenMax+svg实现复古留声机效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax+svg实现复古留声机效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html > <head> <style> body { background-color: #fff6e7; overflow: hidden; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .container { position: absolute; width: 900px; } svg { width: 100%; visibility: hidden; } text { font-size: 5px; font-family: Arial, sans-serif; fill: #ededed; letter-spacing: 2px; text-rendering: optimizeSpeed; } #dragger { cursor: move; } </style> </head> <body> <div class="container"> <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve"> <defs> <path id="titlePath" fill="none" stroke="#FF0049" stroke-miterlimit="10" d="M284,346.5c-14.6,0-26.5-11.9-26.5-26.5 c0-14.6,11.9-26.5,26.5-26.5s26.5,11.9,26.5,26.5C310.5,334.6,298.6,346.5,284,346.5z" /> </defs> <g id="vinylGroup"> <circle id="vinylMain" fill="#2A2525" cx="284" cy="320" r="121" /> <circle id="vinylStart" fill="#262121" cx="284" cy="320" r="117" /> <circle id="vi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0