svg+TweenMax实现炫酷mp3播放器ui交互动画效果代码
代码语言：html
所属分类：多媒体
代码描述：svg+TweenMax实现炫酷mp3播放器ui交互动画效果代码
代码标签： 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,.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0