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;
	t.........完整代码请登录后点击上方下载按钮下载查看