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="goo" /></filter></defs><symbol id="play"><path style="fill-rule:evenodd;clip-rule:evenodd;"                      d="M203.791,99.628L49.307,2.294c-4.567-2.719-10.238-2.266-14.521-2.266   c-17.132,0-17.056,13.227-17.056,16.578v198.94c0,2.833-0.075,16.579,17.056,16.579c4.283,0,9.955,0.451,14.521-2.267   l154.483-97.333c12.68-7.545,10.489-16.449,10.489-16.449S216.471,107.172,203.791,99.628z" /></symbol><symbol id="pause"><rect x="0" width="13" height="36" rx="2"></rect></symbol></svg></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        class PlayerWidget {
            constructor(player, tracks) {
                // State
                this.current = 0
                this.next = 0
                this.currentImage = 0
                this.tracks = tracks
                this.player = player
                this.isPaused = false
                this.interval = null
                // DOM
                this.progressBar = this.player.querySelector('.c-player__ui__seek__seeker div')
                this.progress = this.player.querySelector('.c-player__ui__seek__seeker')
                this.playBtn = this.player.querySelector('.c-player__ui__play')
                this.pauseBtn = this.player.querySelector('.c-player__ui__pause')
                this.pauseSvgs = this.pauseBtn.querySelectorAll('svg')
                this.prevBtn = this.player.querySelector('.c-player__ui__prev')
                this.nextBtn = this.player.querySelector('.c-player__ui__next')
                this.dots = this.player.querySelectorAll('.c-player__ui__dots__dot')
                this.bindEvents()
            }
        
            bindEvents() {
                this.nextBtn.addEventListener('click', e => this.nextTrack(e))
                this.prevBtn.addEventListener('click', e => this.prevTrack(e))
                this.playBtn.addEventListener('click', () => this.playTrack())
                this.pauseBtn.addEventListener('click', () => this.pauseTrack())
            }
        
            playTrack() {
                this.tiltX()
        
                this.tl
                    .set(this.pauseBtn, {
                        transformPerspective: 1000,
                        rotationY: 45,
                        rotationX: -45,
                        scale: .8
                    })
                    .to(this.playBtn, .2, {
                        y: 8,
                        yoyo: true,
                        ease: Sine.easeInOut,
                        repeat: 1
                    }, 0)
        
                    // Dots
                    .set(this.dots, {autoAlpha: 1})
                    .to(this.dots[1], .5, {
                        y: 35,
                        scale: .4,
                        onComplete: () => {
                            this.tl.set(this.dots, {autoAlpha: 0})
                            this.play()
                        },
                        ease: Sine.easeIn
                    }, .65)
                    .to(this.dots[2], .9, {
                        y: 35,
                        scale: .7,
                        ease: Power4.easeIn
                    }, 0)
                    .to(this.dots[3], .9, {
                        y: 15,
                        scaleX: 0,
                        scaleY: 2,.........完整代码请登录后点击上方下载按钮下载查看