TweenMax+svg实现复古留声机效果代码-html代码-BFW代码库

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="vinylEnd" fill="#2A2525" cx="284" cy="320" r="50" />
            <circle id="vinylLabel" fill="#F27469" cx="284" cy="320" r="40.8" />
            <circle id="vinylInner" fill="#B32A38" cx="284" cy="320" r="17" />
            <circle id="vinylHole" fill="#eff2e1" cx="284" cy="320" r="2.5" />


        </g>
        <g id="vinylShineGroup" stroke="#403737" stroke-linecap="round" stroke-linejoin="round">
            <circle id="vinylShine1" opacity="0.3" fill="none" cx="284" cy="320" r="103" />
            <circle id="vinylShine2" opacity="0.3" fill="none" cx="284" cy="320" r="91" />
            <circle id="vinylShine3" opacity="0.3" fill="none" cx="284" cy="320" r="60" />
            <g id="titleGroup" stroke="none" opacity="1">
                <text>
                    <textPath xlink:href="#titlePath">charlie toØ human - A Terrible Fate - </textPath>
                </text>
            </g>
        </g>

        <g id="armGroup">
            <path id="arm" fill="none" stroke="#9F978D" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M398.5,159v29c0,0-5.7,11.2-6.4,15.2
		s-4.3,16.2,7.6,30.1s81.7,93.9,85.5,99.4c3.7,5.5,5.1,8.7,3.4,20.2" />
            <circle id="balance" fill="#CCCBCB" cx="396.5" cy="188" r="19" />
            <path id="stylus" fill="#18110E" d="M489.9,367.5l-11.5-1.1c-2.2-0.2-3.8-2.2-3.6-4.4l1.5-15.9c0.2-2.2,2.2-3.8,4.4-3.6
		l11.5,1.1c2.2,0.2,3.8,2.2,3.6,4.4l-1.5,15.9C494,366.1,492.1,367.7,489.9,367.5z" />
        </g>
        <g id="circleDragger" opacity="0">
            <circle cx="396.5" cy="188" r="190" fill="rgba(89,89,89,0.2)" stroke="red" />
            <rect id="dragger" x="472" y="338" fill="#EF2572" width="26" height="36" opacity="1" />
        </g>
    </svg>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
'<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable.1.20.3.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DrawSVGPlugin.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/AnticipateEase.min.js"></script>


    <script>
      var xmlns = "http://www.w3.org/2000/svg",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    container = select('.container'),
    circleDragger = select('#circleDragger'),
    scPlayer,
    vinylStartRotation = 31,
    vinylEndRotation = 53,
    vinylRotationScale = (vinylEndRotation - vinylSta.........完整代码请登录后点击上方下载按钮下载查看