svg+TweenMax实现炫酷mp3播放器ui交互动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：svg+TweenMax实现炫酷mp3播放器ui交互动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Quicksand:300,700&display=swap' />
    <style>
        * {
        margin:0;
        padding:0;
}
body {
        font-family:"Quicksand";
        min-height:400px;
}
/*http://www.bootstrap.com*/.o-background {
        width:100%;
        height:100%;
        min-height:480px;
        position:absolute;
        background-image:linear-gradient(to right top,#ffc4ee,#ead1fc,#dadcff,#d5e5fb,#dceaf3);
}
.o-background * {
        box-sizing:border-box;
}
.o-credits {
        position:absolute;
        bottom:.5rem;
        left:0;
        color:#fff;
        width:100%;
        text-align:center;
}
.o-credits a {
        color:#fff;
}
.c-player {
        position:absolute;
        left:50%;
        -webkit-transform:translateX(-50%);
        transform:translateX(-50%);
        width:370px;
        border-radius:50%;
        border-radius:0 0 2rem 2rem;
        padding:2.5rem 1.8rem .4rem;
        box-shadow:inset 0px -200px 180px -100px rgba(255,255,255,0.3),0px 12px 20px -20px rgba(0,0,0,0.08);
}
.c-player * {
        -webkit-tap-highlight-color:transparent;
}
.c-player__picture {
        width:230px;
        height:230px;
        border-radius:50%;
        overflow:hidden;
        margin:0 auto;
        box-shadow:0 8px 16px -6px rgba(16,16,16,0.3);
}
.c-player__picture__images {
        width:230px;
        height:230px;
        position:relative;
}
.c-player__picture__images img {
        position:absolute;
        top:0;
        left:0;
        width:230px;
        height:230px;
        -o-object-fit:cover;
        object-fit:cover;
        max-width:100%;
        opacity:1;
}
.c-player__picture__images img + img {
        opacity:0;
}
.c-player__details {
        color:#fff;
        text-align:center;
        line-height:1.3;
        margin:1.3rem 0 1.8rem;
        font-size:1.2rem;
}
.c-player__details strong {
        display:block;
        font-size:1.4rem;
}
.c-player__ui {
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        align-items:center;
        width:230px;
        margin:0 auto;
        position:relative;
}
.c-player__ui__seek {
        width:100%;
        border-radius:15px;
        overflow:hidden;
        height:.4rem;
        margin-top:1.7rem;
}
.c-player__ui__seek__seeker {
        height:.5rem;
        background:rgba(255,255,255,0.3);
        width:0%;
        margin:0 auto;
        border-radius:15px;
}
.c-player__ui__seek__seeker div {
        background:#fff;
        width:0;
        height:.5rem;
}
.c-player__ui .o-controls {
        position:relative;
        width:40px;
        height:40px;
}
.c-player__ui__play {
        width:40px;
        margin:0;
        cursor:pointer;
        position:absolute;
        top:0;
        left:0;
}
.c-player__ui__play svg {
        width:40px;
        fill:white;
}
.c-player__ui__pause {
        position:absolute;
        visibility:hidden;
        top:50%;
        left:50%;
        -webkit-transform:translateX(-50%) translateY(-50%);
        transform:translateX(-50%) translateY(-50%);
        width:29px;
        height:29px;
        cursor:pointer;
}
.c-player__ui__pause svg {
        width:12px;
        fill:rgba(255,255,255,0.7);
        box-shadow:0 0 20px rgba(0,0,0,0.08);
}
.c-player__ui__pause svg + svg {
        visibility:hidden;
}
.c-player__ui__next,.c-player__ui__prev {
        height:25px;
        cursor:pointer;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
}
.c-player__ui__next svg,.c-player__ui__prev svg {
        fill:#fff;
        width:25px;
        height:25px;
        opacity:.6;
}
.c-player__ui__next svg + svg,.c-player__ui__prev svg + svg {
        margin-left:-15px;
}
.c-player__ui__prev {
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
}
.c-player__ui__dots {
        -webkit-filter:url("#goo");
        filter:url("#goo");
        margin:0 auto;
        position:absolute;
        left:43%;
        top:29px;
}
.c-player__ui__dots__dot {
        height:.6rem;
        width:.6rem;
        background:#fff;
        border-radius:50%;
        position:absolute;
        top:0;
        visibility:hidden;
}
.c-player__ui__dots__dot + .c-player__ui__dots__dot + .c-player__ui__dots__dot {
        height:.8rem;
        top:-1px;
}

    </style>
</head>

<body>
    <div class="o-background">
        <div class="c-player">
            <div class="c-player__picture">
                <div class="c-player__picture__images"><img src="//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"><img src="//repo.bfw.wiki/bfwrepo/image/600d6cfee7691.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></div>
            </div>
            <div class="c-player__details"><strong>Sugar</strong><span>Rakata (Offical Single)</span></div>
            <div class="c-player__ui">
                <div class="c-player__ui__prev"><svg class="icon" viewBox="0 0 232.153 232.153"><use class="play" xlink:href="#play" x="0" y="0" /></svg><svg class="icon" viewBox="0 0 232.153 232.153"><use class="play" xlink:href="#play" x="0" y="0" /></svg></div>
                <div class="o-controls">
                    <div class="c-player__ui__play"><svg class="icon" viewBox="0 0 232.153 232.153"><use class="play" xlink:href="#play" x="0" y="0" /></svg></div>
                    <div class="c-player__ui__pause"><svg class="icon" viewBox="0 0 14 36"><use class="pause" xlink:href="#pause" x="0" y="0" /></svg><svg class="icon" viewBox="0 0 14 36"><use class="pause" xlink:href="#pause" x="0" y="0" /></svg></div>
                </div>
                <div class="c-player__ui__next"><svg class="icon" viewBox="0 0 232.153 232.153"><use class="play" xlink:href="#play" x="0" y="0" /></svg><svg class="icon" viewBox="0 0 232.153 232.153"><use class="play" xlink:href="#play" x="0" y="0" /></svg></div>
                <div class="c-player__ui__seek">
                    <div class="c-player__ui__seek__seeker">
                        <div></div>
                    </div>
                </div>
                <div class="c-player__ui__dots">
                    <div class="c-player__ui__dots__dot"></div>
                    <div class="c-player__ui__dots__dot"></div>
                    <div class="c-player__ui__dots__dot"></div>
                    <div class="c-player__ui__dots__dot"></div>
                </div>
            </div>
        </div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"                                   result="goo" /><feBlend in="SourceGraphic" in2=.........完整代码请登录后点击上方下载按钮下载查看