dynamics+abbey-load实现唱片式带混音交互式音乐播放器效果代码
代码语言：html
所属分类：多媒体
代码描述：dynamics+abbey-load实现唱片式带混音交互式音乐播放器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
@font-face {
font-family: 'nexa_boldregular';
font-weight: bold;
font-style: normal;
src: url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot');
src: url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype'), url('//repo.bfw.wiki/bfwrepo/font/Nexa_Free_Bold-webfont.woff2') format('woff2'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff') format('woff'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf') format('truetype'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.svg#nexa_boldregular') format('svg');
}
*,
*::after,
*::before {
box-sizing: border-box;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
body {
font-family: 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace;
overflow-x: hidden;
color: #474283;
background: #45cb96;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: #fff;
outline: none;
}
a:hover,
a:focus {
color: #349770;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
.icon--hidden {
display: none;
}
/* scroll control */
html.js,
.js body {
overflow: hidden;
height: 100%;
}
/* Views */
.js .view {
pointer-events: none;
}
.js .view--grid {
overflow: hidden;
overflow-y: scroll;
position: relative;
height: 100vh;
opacity: 0;
-webkit-overflow-scrolling: touch;
}
.js .view--single {
position: fixed;
top: 50%;
left: 50%;
width: 80vmin;
height: 80vmin;
margin: -40vmin 0 0 -40vmin;
}
.view--player {
display: none;
}
.js .view--player {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100vw;
height: 100%;
}
.js .view--current {
pointer-events: auto;
opacity: 1;
}
/* Header */
.page-header {
position: relative;
margin: 0 auto;
padding: 10vmin 4em 0;
pointer-events: none;
}
.page-header__title {
font-family: 'nexa_boldregular', sans-serif;
font-size: 7vmin;
line-height: 1.25;
margin: 0;
padding: 0 0 0 1.65em;
background: url(//repo.bfw.wiki/bfwrepo/svg/vinyls.svg) no-repeat 0 50%;
background-size: auto 100%;
}
.page-header__subtitle {
display: block;
max-width: calc(50vw - 5em);
margin: 1em 0 0 5px;
color: #fff;
}
/* Codrops navigation */
.codrops-links {
font-size: 0.75em;
position: relative;
display: inline-block;
margin: 2.5em 0 0 0;
text-align: center;
white-space: nowrap;
}
.codrops-links::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 100%;
background: #474283;
-webkit-transform: translateY(-50%) rotate3d(0, 0, 1, 22.5deg);
transform: translateY(-50%) rotate3d(0, 0, 1, 22.5deg);
}
.codrops-icon {
display: inline-block;
width: 1.5em;
margin: 0.25em 0.5em;
text-decoration: none;
pointer-events: auto;
}
@media screen and (max-width: 55em) {
.page-header {
padding: 2em;
}
.page-header__title {
font-size: 8vmin;
}
.page-header__subtitle {
max-width: none;
}
}
/* grid */
.grid {
position: relative;
min-height: 100vh;
margin: 0 auto;
padding: 0;
list-style: none;
}
.js .grid::after {
content: '';
position: absolute;
top: 150px;
left: 50%;
width: 80px;
height: 80px;
margin: 0 0 0 -40px;
border: 10px solid rgba(255, 255, 255, 0.8);
border-bottom-color: #474283;
border-radius: 50%;
-webkit-animation: spinLoader 1s linear infinite forwards;
animation: spinLoader 1s linear infinite forwards;
}
.js .grid--loaded::after {
display: none;
}
@-webkit-keyframes spinLoader {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinLoader {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.page-header,
.grid {
max-width: 1200px;
}
.grid__item {
position: relative;
width: 50%;
min-width: 280px;
margin: 0 0 2em;
padding: 1em 4em 0;
}
.js .grid__item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.js .grid--loaded .grid__item {
opacity: 1;
}
.no-js .grid__item {
display: inline-block;
width: calc(33.33% - 0.4em);
margin: 2em 0;
}
@media screen and (min-width: 52.5em) {
.grid__item {
width: 33.33%;
margin: 0 0 9em;
}
.js .grid__item:first-child {
margin-top: 5em;
}
.js .grid__item:nth-child(2) {
margin-top: 14em;
}
}
@media screen and (max-width: 36em) {
.grid__item {
width: 100%;
margin: 2em 0;
padding: 1em 2em 0;
}
}
/* grid decoration */
.grid__item--deco::before {
font-family: 'nexa_boldregular', sans-serif;
font-size: 15em;
position: absolute;
z-index: -1;
top: -1em;
left: -0.15em;
opacity: 0.1;
}
.grid__item--deco-1::before {
content: '1985';
}
.grid__item--deco-2::before {
content: '1974';
}
.grid__item--deco-3::before {
content: '2015';
}
/* grid link */
.grid__link {
position: relative;
display: block;
color: #474283;
-webkit-perspective: 1200px;
perspective: 1200px;
}
.grid__link:hover {
color: #474283;
outline: none;
}
/* image wrap and deco lp */
.img-wrap {
position: relative;
}
.lp {
position: absolute;
}
.lp--grid {
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(10%, 0, 0);
transform: translate3d(10%, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.grid__link:hover .lp {
-webkit-transform: translate3d(20%, 0, 0);
transform: translate3d(20%, 0, 0);
}
.img {
display: block;
}
.img--grid {
position: relative;
max-width: 100%;
box-shadow: 2px 16px 26px 0px rgba(36, 33, 69, 0.3);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.artist {
font-size: 0.85em;
font-weight: normal;
margin: 1em 0 0.5em;
}
.title {
font-size: 1em;
font-weight: bold;
margin: 0 0 0 3em;
white-space: nowrap;
}
.year {
font-size: 0.85em;
position: absolute;
z-index: 10;
right: 0;
margin: -1em -1em 0 0;
padding: 0.3em 0.5em;
color: #fff;
border: 2px solid;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.year--contrast {
color: inherit;
}
/* related */
.content--related {
margin: 3em 0 0;
padding: 20vmin 2em;
text-align: center;
color: #595867;
background: #302f3c;
}
.content__title {
font-family: 'nexa_boldregular', sans-serif;
font-size: 1.25em;
}
.media-item {
font-size: 0.85em;
display: inline-block;
padding: 1em;
vertical-align: top;
}
.media-item__img {
display: block;
max-width: 100%;
opacity: 0.5;
box-shadow: 2px 16px 26px 0px rgba(36, 33, 69, 0.3);
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
opacity: 1;
}
.media-item__title {
font-size: 1em;
position: relative;
display: block;
margin: 1em 0 0 0;
padding: 0.5em;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
/* Decorative expander for the grid to single transition */
.deco-expander {
position: fixed;
top: 50%;
left: 50%;
width: calc(100vmax * 1.4142);
height: calc(100vmax * 1.4142);
margin: calc(-100vmax * 1.4142 / 2) 0 0 calc(-100vmax * 1.4142 / 2);
pointer-events: none;
opacity: 0;
border-radius: 50%;
background: #45918e;
-webkit-transform: scale(0.001);
transform: scale(0.001);
}
/* Single LP view */
.single {
position: relative;
min-height: 100vh;
}
.no-js .single {
text-align: center;
}
.js .single,
.lp--single {
width: 100%;
height: 100%;
}
.no-js .lp--single {
display: none;
}
.js .single {
position: absolute;
min-height: 0;
pointer-events: none;
opacity: 0;
}
.js .single--current {
pointer-events: auto;
opacity: 1;
}
.js .img-wrap--single {
position: absolute;
width: 100%;
height: 100%;
}
.js .img-wrap--single::after {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: -webkit-radial-gradient(50% 50%, transparent, rgba(0, 0, 0, 0.4));
background: radial-gradient(50% 50%, transparent, rgba(0, 0, 0, 0.4));
}
.img--single {
max-width: 100%;
height: 100%;
box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.3);
}
.no-js .img--single {
height: 50vmin;
margin: 10vmin auto 3em;
}
.number,
.artist--single,
.title--single {
color: #fff;
/**text-shadow: 1px 11px 3vmin rgba(0,0,0,0.3);*/
}
.js .number,
.js .artist--single,
.js .title--single {
position: absolute;
}
.number,
.artist--single {
font-family: 'nexa_boldregular', sans-serif;
}
.number {
font-size: 13vmin;
top: -5vmin;
left: -6vmin;
white-space: nowrap;
}
.number__total {
font-size: 7vmin;
vertical-align: top;
}
.number__total::before {
content: ' / ';
vertical-align: top;
}
.artist--single {
font-size: 6vmin;
line-height: 0.8;
bottom: 0;
left: -5vmin;
margin: 0 0 0.25em 0;
white-space: nowrap;
}
.title--single {
font-size: 3vmin;
font-weight: normal;
top: 100%;
left: 5vmin;
margin: 0.25em 0 0;
}
.year--single {
font-size: 3vmin;
margin: 0;
color: #fff;
border-width: 0.5vmin;
}
.js .year--single {
top: -1em;
right: -5vmin;
}
.no-js .year--single {
position: relative;
right: auto;
display: inline-block;
margin: 1em auto;
}
.controls {
width: 100%;
height: 100%;
}
.controls__navigate {
position: absolute;
bottom: 0;
left: calc(100% + 1vmin);
}
.control-button--next,
.control-button--prev {
font-size: 4vmin;
color: #fff;
}
.control-button {
padding: 0;
border: 0;
background: none;
}
.no-js .control-button {
display: none;
}
.control-button:hover {
color: #333;
}
.control-button:focus {
outline: none;
}
.control-button--play {
font-size: 5vmin;
position: absolute;
margin: -42px 0 0 -42px;
top: 50%;
left: 50%;
width: 84px;
height: 84px;
padding: 0;
color: #fff;
}
.control-button--play:hover,
.control-button--play:focus {
color: #fff;
}
.control-button--play .icon {
position: absolute;
}
.control-button--play .icon--play {
-webkit-transform: scale(0.5);
transform: scale(0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.control-button--active .icon--play {
opacity: 0;
}
.icon--progress {
top: -5.5%;
width: 111%;
height: 111%;
margin: 0;
left: -4.5%;
}
.icon--progress path {
fill: none;
stroke: #474283;
stroke-width: 8px;
}
.icon--progress circle {
fill: rgba(255,255,255,0.2);
-webkit-transition: fill 0.3s;
transition: fill 0.3s;
}
.control-button--play:hover .icon--progress circle,
.control-button--play:focus .icon--progress circle {
fill: rgba(255,255,255,0.5);
}
.control-button--back {
font-size: 3vmin;
position: fixed;
top: 2vmin;
left: 3vmin;
color: #fff;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Initial hidden state of single view elements */
.lp--single,
.js .img-wrap--single,
.js .number,
.js .year--single,
.js .artist--single,
.js .title--single,
.control-button--back,
.controls .control-button {
opacity: 0;
}
.control-button--back,
.controls .control-button--next,
.controls .control-button--prev {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.view--current .control-button--back,
.view--current .controls .control-button--next,
.view--current .controls .control-button--prev {
opacity: 1;
}
/* Player */
.view--player {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.view--player.view--current .control-button--back {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.player-stand {
position: absolute;
top: 50%;
left: 50%;
width: calc(90vmin + (0.2 * 80vmin));
height: 90vmin;
border-radius: 0.15em;
background: #45bd94;
-webkit-transform: translate3d(-50%, -50%, 0) translate3d(calc(0.06 * 80vmin), 0, 0);
transform: translate3d(-50%, -50%, 0) translate3d(calc(0.06 * 80vmin), 0, 0);
pointer-events: none;
}
.visualizer {
position: absolute;
top: 3vmin;
right: 4vmin;
width: 185px;
height: 25px;
border: 1px solid;
}
.song {
font-size: 0.7em;
position: absolute;
top: calc(38px + 2.5vmin);
right: 4vmin;
max-width: calc(50vw - 4vmin);
text-align: right;
}
.player-info {
position: absolute;
z-index: 100;
max-width: 50vw;
padding: 9vmin 0 0 9vmin;
pointer-events: none;
}
.year--player,
.artist--player,
.title--player {
color: #fff;
}
.artist--player {
font-family: 'nexa_boldregular', sans-serif;
}
.artist--player {
font-size: 8vmin;
line-height: 0.8;
margin: 0 0 0.25em 0;
white-space: nowrap;
}
.title--player {
font-size: 3vmin;
font-weight: normal;
margin: 0.25em 0 0;
}
.year--player {
font-size: 2vmin;
position: relative;
display: inline-block;
margin: 1em 0;
border-width: 0.25vmin;
}
.player {
position: relative;
width: 100%;
height: 100%;
pointer-events: none;
}
.player__element {
position: absolute;
top: 50%;
left: 50%;
width: 80vmin;
height: 80vmin;
margin: -40vmin 0 0 -40vmin;
}
.player__element svg,
.player__element-inner {
width: 100%;
height: 100%;
}
.player__element--lp {
opacity: 0;
-webkit-transform: perspective(2000px);
transform: perspective(2000px);
-webkit-transition: -webkit-transform 0s 1s;
transition: transform 0s 1s;
}
.view--current .player__element--lp {
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
.player__element--lp-flip {
-webkit-transform: perspective(2000px) rotate3d(1,1,0,180deg);
transform: perspective(2000px) rotate3d(1,1,0,180deg);
}
.player__element--lp svg {
-webkit-animation: spinAroundA 10s linear infinite forwards;
animation: spinAroundA 10s linear infinite forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes spinAroundA {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinAroundA {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.player__element--lp-spin:not(.player__element--lp-flip) .player__svg-lp {
-webkit-animation-play-state: running;
animation-play-state: running;
}
.player__element--lp .player__element-inner {
-webkit-animation: spinAroundB 10s linear infinite forwards;
animation: spinAroundB 10s linear infinite forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.player__element--lp-spin.player__element--lp-flip .player__element-inner {
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes spinAroundB {
to {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes spinAroundB {
to {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.lp-side-label {
-webkit-transition: visibility 0s 0.35s;
transition: visibility 0s 0.35s;
}
.player__element--lp-flip .lp-side-label--a,
.lp-side-label--b {
visibility: hidden;
}
.player__element--lp-flip .lp-side-label--b {
visibility: visible;
}
/* The label is 32.4358% of the total width of the vinyl disc;
this means that we can push the tonearm a maximum of half of that (16%);
we use margins because transforms will be applied dynamically */
.player__element--tonearm {
margin: calc(-40vmin - (0.13 * 80vmin)) 0 0 calc(0.11 * 80vmin);
}
.view--current .player__element--tonearm svg * {
pointer-events: auto;
}
.grabbable {
cursor: move;
cursor: grab;
cursor: -webkit-grab;
}
.grabbable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.player__controls {
position: absolute;
bottom: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
padding: 4vmin;
}
.view--current .player__controls {
pointer-events: auto;
}
.player-button {
position: relative;
margin: 0 0.25em;
padding: 1em;
color: #fff;
border: 0;
border-radius: 50%;
background: #474283;
}
.player-button:hover {
color: #474283;
background: rgba(255, 255, 255, 0.9);
}
.player-button:focus {
outline: none;
}
.effects {
position: absolute;
top: 10vmin;
right: 0;
bottom: 5vmin;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: end;
align-items: flex-end;
width: 10vmin;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-align: end;
}
.effects__irs {
margin: 0.5em 0 0;
padding: 1em 0 0;
border-top: 1px solid #379676;
}
.effects__button {
display: block;
-ms-flex: none;
flex: none;
width: 100%;
width: 4em;
height: 4em;
margin: 0.5em 0;
padding: 1em;
color: #37a07c;
border: 0;
background: none;
-webkit-box-flex: 0;
}
.effects__button--active {
color: #474283;
}
.effects__button:focus {
outline: none;
}
.effects__button .icon {
width: 100%;
height: 100%;
}
.effects__input {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.icon--touchthrough {
pointer-events: none;
}
/* Initially hidden elements of the player */
.player-info,
.player-stand,
.player__element--tonearm,
.visualizer,
.effects {
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.view--current .player-info,
.view--current .player-stand,
.view--current .player__element--tonearm,
.view--current .visualizer,
.view--current .effects {
opacity: 1;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
/* Media queries */
@media screen and (max-aspect-ratio: 100/75) {
.player-stand {
top: 0;
left: 0;
width: 100vw;
height: 100%;
-webkit-transform: none;
transform: none;
background: none;
}
.song, .visualizer, .effects {
display: none;
}
.control-button--back {
font-size: 5vmin;
}
.player-info {
max-width: none;
width: 100%;
padding: 15vmin 1em 0 1em;
}
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.custom.2.6.2.js"></script>
</head>
<body>
<svg class="hidden">
<!-- made with Icomoon.io, Icons from http://www.entypo.com/ and https://icomoon.io/ -->
<defs>
<symbol id="icon-ir-acoustic" viewBox="0 0 30 30">
<path d="M13.3,14.5c-0.6,0-1.1,0.2-1.6,0.6c-0.4,0.4-0.6,1-0.6,1.6c0,0.6,0.2,1.1,0.6,1.6c0.4,0.4,1,0.6,1.6,0.6c0.6,0,1.1-0.2,1.6-0.6c0.4-0.4,0.6-1,0.6-1.6c0-0.6-0.2-1.1-0.6-1.6C14.5,14.7,13.9,14.5,13.3,14.5z M14.1,17.4c-0.2,0.2-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8C14.4,17,14.3,17.2,14.1,17.4z"/><path d="M7.7,19.3c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8l3,3c0.1,0.1,0.3,0.2,0.4,0.2c0.1,0,0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8L7.7,19.3z"/><path d="M26.8,6.4l0.3-0.3c0,0,0,0,0,0c0.4-0.4,0.4-1.1,0-1.5l-1.8-1.8c-0.2-0.2-0.5-0.3-0.7-0.3c-0.3,0-0.5,0.1-0.7,0.3c0,0,0,0,0,0l-0.3,0.3L23.4,3c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8L22.9,4l-0.2,0.2L22.4,4c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8L22,5.1l-0.2,0.3c-0.2,0.2-0.3,0.4-0.3,0.6c0,0.1,0,0.2,0,0.3l-5.5,5.5c-0.8-0.5-1.6-0.7-2.4-0.7c0,0-0.1,0-0.1,0c-1.2,0-2.3,0.5-3.1,1.4c-0.4,0.4-0.7,1-0.9,1.6c-0.1,0.4-0.5,0.6-0.9,0.7c-1.2,0-3,0.3-4.2,1.6C3,17.7,2.4,19.3,2.5,21c0.1,1.5,0.9,3.1,2.2,4.4l0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c1.3,1.3,2.8,2,4.4,2.1c0.2,0,0.3,0,0.5,0c1.5,0,2.9-0.6,4.1-1.7c1.2-1.2,1.5-3,1.6-4.2c0-0.4,0.3-0.8,0.7-0.9c0.7-0.2,1.2-0.5,1.6-0.9c0.9-0.9,1.4-2,1.4-3.1c0-0.8-0.2-1.7-0.7-2.5l5.5-5.5c0.1,0,0.1,0,0.2,0c0.3,0,0.5-0.1,0.7-0.3L24.9,8l0.4,0.4c0.1,0.1,0.3,0.2,0.4,0.2c0.1,0,0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8l-0.3-0.3L26,7.1l0.3,0.3c0.1,0.1,0.3,0.2,0.4,0.2c0.1,0,0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.8L26.8,6.4z M24.6,3.7l1.7,1.7l-2.5,2l-1.3-1.3L24.6,3.7z M17.7,16.6c0,0.9-0.4,1.7-1.1,2.4c-0.3,0.3-0.7,0.5-1.1,0.6c-0.8,0.2-1.4,1-1.5,1.9c0,1-0.3,2.5-1.2,3.4c-1,1-2.3,1.5-3.7,1.4c-1.3-0.1-2.6-0.8-3.7-1.8c-1.1-1.1-1.7-2.4-1.8-3.7C3.5,19.5,4,18.2,5,17.2c1-1,2.4-1.2,3.4-1.2c0.9,0,1.7-0.6,1.9-1.5c0.1-0.5,0.4-0.9,0.6-1.1c0.7-0.7,1.5-1.1,2.4-1.1c0,0,0.1,0,0.1,0c1,0,2,0.5,2.9,1.3C17.6,14.9,17.7,16.1,17.7,16.6z M17.2,12.8c-0.1-0.1-0.2-0.2-0.3-0.3l5.3-5.3l0.6,0.6l-5.3,5.3C17.4,13,17.3,12.9,17.2,12.8z"/>
</symbol>
<symbol id="icon-ir-cathedral" viewBox="0 0 32 32">
<path d="M26.5,22.5c0-0.3-0.2-0.5-0.5-0.5v-4.2c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-0.5v-2.8c0-0.3-0.2-0.5-0.5-0.5V9.8c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5h-0.5V8.4c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5V6.1c0-0.6-0.4-1.1-0.9-1.3v-1c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v1c-0.5,0.2-0.9,0.7-0.9,1.3v1.4c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5v0.5h-0.5c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5v3.8c-0.3,0-0.5,0.2-0.5,0.5v2.8l-0.5-0.2v-4c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5h0c-0.2-2.3-1.8-4.2-4-4.7V6.1c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5V3.7c0-0.6-0.4-1.1-0.9-1.3v-1c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v1c-0.5,0.2-0.9,0.7-0.9,1.3v1.4c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5V7c-2.1,0.6-3.8,2.5-4,4.7h0c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5v4l-0.5,0.2h0v-2.8c0-0.3-0.2-0.5-0.5-0.5V9.8c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5H8.2V8.4c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5V6.1c0-0.6-0.4-1.1-0.9-1.3v-1c0-0.3-0.2-0.5-0.5-0.5S6.3,3.5,6.3,3.7v1C5.8,5,5.4,5.5,5.4,6.1v1.4C5.1,7.5,4.9,7.7,4.9,8c0,0.3,0.2,0.5,0.5,0.5v0.5H4.9c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5v3.8c-0.3,0-0.5,0.2-0.5,0.5v2.8H4c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5V22c-0.3,0-0.5,0.2-0.5,0.5S3.7,23,4,23v5.2c-0.3,0-0.5,0.2-0.5,0.5c0,0.3,0.2,0.5,0.5,0.5h22c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5V23C26.3,23,26.5,22.8,26.5,22.5z M25.1,22h-3.8v-4.2h3.8V22z M19.5,26.3c-0.3,0-0.5,0.2-0.5,0.5v1.4h-0.5V23h1.9v5.2h-0.5v-1.4C19.9,26.5,19.7,26.3,19.5,26.3z M10.5,26.3c-0.3,0-0.5,0.2-0.5,0.5v1.4H9.6V23h1.9v5.2H11v-1.4C11,26.5,10.8,26.3,10.5,26.3z M12.4,12.7v2.6L12,15.5v-2.8H12.4z M13.8,12.7v1.9l-0.5,0.2v-2.2H13.8z M15.2,12.7v1.5l0,0c-0.1-0.1-0.3-0.1-0.4,0l0,0v-1.5H15.2z M16.6,12.7v2.2l-0.5-0.2v-1.9H16.6z M18,12.7v2.8l-0.5-0.2v-2.6H18z M14.4,15.3c0,0,0.1,0,0.1-0.1l0.4-0.2l0.4,0.2c0,0,0.1,0.1,0.2,0.1l3.2,1.5h-7.5L14.4,15.3z M16.2,23.9h-2.3V23h2.3V23.9z M13.8,22v-4.2h2.3V22H13.8z M12.9,17.8V22h-0.5v-4.2H12.9z M17.1,17.8h0.5V22h-0.5V17.8z M9.6,17.8h1.9V22H11v-1.9c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.5V22H9.6V17.8z M12.4,23h0.5v5.2h-0.5V23z M13.8,24.9h2.3v3.3h-2.3V24.9z M17.1,23h0.5v5.2h-0.5V23z M19.9,22v-1.9c0-0.3-0.2-0.5-0.5-0.5S19,19.9,19,20.2V22h-0.5v-4.2h1.9V22H19.9z M21.8,16.9v-2.3h0.1c0.2,0,0.4-0.1,0.4-0.3c0.1-0.4,0.5-0.6,0.9-0.6s0.8,0.3,0.9,0.6c0.1,0.2,0.2,0.3,0.4,0.3h0.1v2.3H21.8z M24.1,12.9c-0.1-0.1-0.3-0.1-0.5-0.2V9.8h0.5V12.9z M22.7,6.6h0.9v0.9h-0.9V6.6z M22.7,8.4h0.9v0.5h-0.9V8.4z M22.7,9.8v2.9c-0.2,0-0.3,0.1-0.5,0.2V9.8H22.7z M19,15.9v-3.3h0.5v3.5L19,15.9z M14.5,4.2h0.9v0.9h-0.9V4.2z M14.5,6.1h0.9v0.7c-0.2,0-0.3,0-0.5,0s-0.3,0-0.5,0V6.1z M15,7.7c2.3,0,4.2,1.7,4.4,4h-8.9C10.8,9.5,12.7,7.7,15,7.7z M10.5,12.7H11V16l-0.5,0.2V12.7z M7.7,12.9c-0.1-0.1-0.3-0.1-0.5-0.2V9.8h0.5V12.9z M6.3,6.6h0.9v0.9H6.3V6.6z M6.3,8.4h0.9v0.5H6.3V8.4z M6.3,9.8v2.9c-0.2,0-0.3,0.1-0.5,0.2V9.8H6.3z M5.4,14.5L5.4,14.5c0.3,0,0.5-0.1,0.5-0.3c0.1-0.4,0.5-0.6,0.9-0.6c0.4,0,0.8,0.3,0.9,0.6c0.1,0.2,0.2,0.3,0.4,0.3h0.1v2.3H5.4V14.5z M4.9,17.8h3.8V22H4.9V17.8z M4.9,23h3.8v5.2H4.9V23z M25.1,28.1h-3.8V23h3.8V28.1z"/>
<path d="M6.8,18.3c-0.3,0-0.5,0.2-0.5,0.5v1.9c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-1.9C7.3,18.5,7,18.3,6.8,18.3z"/>
<path d="M23.2,21.1c0.3,0,0.5-0.2,0.5-0.5v-1.9c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v1.9C22.7,20.9,23,21.1,23.2,21.1z"/>
<path d="M6.8,23.9c-0.3,0-0.5,0.2-0.5,0.5v1.9c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-1.9C7.3,24.1,7,23.9,6.8,23.9z"/>
<path d="M23.2,26.7c0.3,0,0.5-0.2,0.5-0.5v-1.9c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v1.9C22.7,26.5,23,26.7,23.2,26.7z"/>
<path d="M6.8,14.1c-0.1,0-0.2,0-0.3,0.1c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0.1,0.2,0.1,0.3C6.5,15,6.7,15,6.8,15c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3C7,14.1,6.9,14.1,6.8,14.1z"/>
<path d="M23.2,14.1c-0.1,0-0.2,0-0.3,0.1c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0,0.2,0.1,0.3C23,15,23.1,15,23.2,15c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3C23.5,14.1,23.3,14.1,23.2,14.1z"/>
<path d="M11,24.9c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.5v0.5c0,0.3,0.2,0.5,0.5,0.5c0.3,0,0.5-0.2,0.5-0.5V24.9z"/>
<path d="M19.9,24.9c0-0.3-0.2-0.5-0.5-0.5S19,24.6,19,24.9v0.5c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V24.9z"/>
</symbol>
<symbol id="icon-ir-stadium" viewBox="0 0 32 32">
<path d="M28.8,9.3c-1.3,0-1-0.8-2.1-0.7l0,0l-0.2,0l0,1.8c-0.5-0.5-1.2-0.8-1.8-1.1c-1.5-0.8-3.2-1.2-4.9-1.5l0-0.9c0.8-0.7,1.6,0.3,2.1-0.7c-1.3,0-1-0.8-2.1-0.7l0,0l-0.2,0l0,2.3c-0.4-0.1-0.8-0.1-1.2-0.2c-2.3-0.3-4.7-0.2-7,0.1c-0.2,0-0.4,0.1-0.6,0.1l0-2.3l-0.2,0l0,0C9.2,5.3,9.5,6.1,8.2,6.1c0.6,1,1.3,0,2.1,0.7l0,0.9C8.4,8,6.5,8.6,4.8,9.5C4.4,9.8,4,10,3.6,10.4l0-1.8l-0.2,0l0,0C2.3,8.5,2.5,9.3,1.2,9.3c0.6,1,1.3,0,2.1,0.7l0,0.6c-0.8,0.7-1.4,1.7-1.4,2.8c0.1,1.3,0.8,2.3,1.8,3.1v1.8c-0.4-0.3-0.6-0.6-0.8-0.9c-0.1-0.2-0.2-0.3-0.2-0.5c-0.1-0.1-0.1-0.3-0.1-0.4c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1s0,0,0,0.1c0,0.1,0,0.1,0,0.2c0,0.2,0,0.5,0.2,0.9c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.2,0.3,0.4,0.5,0.6c0.1,0.1,0.1,0.1,0.2,0.2v1.7c-0.4-0.3-0.6-0.6-0.8-0.9c-0.1-0.2-0.2-0.3-0.2-0.5c-0.1-0.1-0.1-0.3-0.1-0.4c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1s0,0,0,0.1c0,0.1,0,0.1,0,0.2c0,0.2,0,0.5,0.2,0.9c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.2,0.3,0.4,0.5,0.6c0.1,0.1,0.1,0.1,0.2,0.2l0,0c0.4,0.3,0.8,0.7,1.3,1c0.3,0.2,0.6,0.4,1,0.5c0.3,0.2,0.7,0.3,1.1,0.5c0.8,0.3,1.6,0.5,2.4,0.7c0.4,0.1,0.9,0.2,1.3,0.3c0,0,0,0,0.1,0l0.1,0.4l0.3-0.1l0.3-0.1l-1-3.2c2.9-0.7,5.8-0.7,8.7,0l-1,3.2l0.3,0.1l0.3,0.1l0.1-0.4c0,0,0,0,0.1,0c0.4-0.1,0.9-0.2,1.3-0.3c0.9-0.2,1.7-0.5,2.4-0.7c0.4-0.1,0.7-0.3,1.1-0.5c0.3-0.2,0.7-0.3,1-0.5c0.5-0.3,0.9-0.6,1.3-1l0,0c0.1-0.1,0.1-0.1,0.2-0.2c0.4-0.4,0.7-0.9,0.8-1.2c0.2-0.4,0.2-0.7,0.2-0.9c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1s0,0,0,0.1c0,0.1,0,0.1,0,0.2c0,0.1-0.1,0.2-0.1,0.4c-0.1,0.1-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.3-0.4,0.5c-0.1,0.1-0.3,0.3-0.4,0.4v-1.7c0.1-0.1,0.1-0.1,0.2-0.2c0.4-0.4,0.7-0.9,0.8-1.2c0.2-0.4,0.2-0.7,0.2-0.9c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1s0,0,0,0.1c0,0.1,0,0.1,0,0.2c0,0.1-0.1,0.2-0.1,0.4c-0.1,0.1-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.3-0.4,0.5c-0.1,0.1-0.3,0.3-0.4,0.4v-1.8c1-0.8,1.7-1.8,1.8-3.1c0-1.1-0.6-2.1-1.4-2.8l0-0.6C27.5,9.3,28.2,10.3,28.8,9.3z M19.8,8.8C20.9,9,22,9.3,23,9.7c0.9,0.4,2.1,0.9,2.9,1.6l-4.4,2.7c-0.9-0.7-2.3-1.2-4-1.5L19.8,8.8z M21,15.7c0,1.3-2.7,2.3-6,2.3s-6-1-6-2.3s2.7-2.3,6-2.3S21,14.4,21,15.7z M16.5,8.4c0.9,0,1.8,0.1,2.6,0.3l-2.3,3.9c-0.6-0.1-1.2-0.1-1.8-0.1c-0.6,0-1.2,0-1.8,0.1l-2.3-3.9C12.7,8.4,14.6,8.3,16.5,8.4z M4.9,10.8c1.6-1,3.4-1.6,5.3-1.9l2.3,3.8c-1.7,0.3-3.1,0.8-4,1.5l-4.4-2.7C4.4,11.1,4.6,10.9,4.9,10.8z M5.4,21.6c-0.3-0.1-0.6-0.3-0.8-0.5c-0.1,0-0.1-0.1-0.2-0.1v-1.6c0.2,0.2,0.4,0.3,0.7,0.5c0.3,0.2,0.6,0.4,1,0.5c0.3,0.1,0.5,0.3,0.8,0.4c0,0,0,1.4,0,1.4C6.4,22,5.9,21.8,5.4,21.6z M6.9,19.9c-0.5-0.2-1-0.4-1.5-0.6c-0.3-0.1-0.6-0.3-0.8-0.5c-0.1,0-0.1-0.1-0.2-0.1v-1.9c0.2,0.1,0.5,0.3,0.7,0.4c0.6,0.3,1.2,0.6,1.8,0.8V19.9z M6.3,16.6c-0.9-0.4-1.8-0.9-2.5-1.7c-0.3-0.4-0.8-1.1-0.7-1.6c0-0.3,0.1-0.7,0.3-1c0.1-0.1,0.2-0.3,0.3-0.4L8,14.6c-0.3,0.4-0.5,0.8-0.5,1.2c0,0.6,0.4,1.2,1.1,1.7C7.9,17.3,7.1,17,6.3,16.6z M9.8,22.9c-0.8-0.1-1.5-0.3-2.2-0.5v-1.4c0.6,0.2,1.3,0.4,2,0.6c0.2,0.1,0.4,0.1,0.6,0.1l0.4,1.3C10.3,23,10,23,9.8,22.9z M10.5,20.8c-0.2,0-0.5-0.1-0.7-0.1c-0.8-0.1-1.5-0.3-2.2-0.5v-1.8c1.3,0.4,2.7,0.7,4.1,0.9c2.3,0.3,4.6,0.3,6.9,0c1.3-0.2,2.7-0.4,4-0.8v1.8c-0.7,0.2-1.5,0.4-2.2,0.5c-0.2,0-0.5,0.1-0.7,0.1C16.5,20,13.5,20,10.5,20.8z M22.5,22.4L22.5,22.4c-0.7,0.2-1.5,0.4-2.2,0.5c-0.3,0-0.5,0.1-0.8,0.1l0.4-1.3c0.2,0,0.4-0.1,0.6-0.1c0.7-0.2,1.4-0.4,2-0.6V22.4z M25.6,21.1L25.6,21.1c-0.1,0-0.1,0.1-0.2,0.1c-0.3,0.2-0.5,0.3-0.8,0.5c-0.4,0.2-0.9,0.4-1.5,0.6v-1.4c0.3-0.1,0.6-0.2,0.8-0.4c0.3-0.2,0.7-0.3,1-0.5c0.2-0.1,0.5-0.3,0.7-0.5V21.1z M23.1,19.9v-1.8c0.6-0.2,1.1-0.4,1.6-0.7c0.3-0.1,0.6-0.3,0.8-0.5v1.8c-0.1,0-0.1,0.1-0.2,0.1c-0.3,0.2-0.5,0.3-0.8,0.5C24.1,19.5,23.6,19.7,23.1,19.9z M26.9,13.3c0,1-0.9,1.9-1.8,2.5c-1.1,0.8-2.4,1.3-3.8,1.6c0.7-0.5,1.1-1.1,1.1-1.7c0-0.4-0.2-0.8-0.5-1.2l4.4-2.7C26.6,12.3,26.8,12.8,26.9,13.3z"/>
</symbol>
<symbol id="icon-arrow" viewBox="0 0 32 32">
<title>arrow</title>
<path d="M7.333 24c-0.133 0-0.4 0-0.533-0.133l-6.667-6.667c0 0-0.133-0.133-0.133-0.267s0-0.133 0-0.267c0 0 0 0 0 0 0-0.133 0-0.133 0-0.267s0.133-0.133 0.133-0.267l6.667-6.667c0.4-0.133 0.8-0.133 1.067 0s0.267 0.667 0 0.933l-5.6 5.6h29.067c0.4 0 0.667 0.267 0.667 0.667s-0.267 0.667-0.667 0.667h-29.067l5.467 5.467c0.267 0.267 0.267 0.667 0 0.933 0 0.267-0.267 0.267-0.4 0.267z"></path>
</symbol>
<symbol id="icon-rotate" viewBox="0 0 24 24">
<path d="M17.6,2.9c1.5,1.4,2.2,3.4,2.2,5.2c0,1.2-0.3,2.4-0.9,3.5l-1.2-1.2C18,9.7,18.1,9,18.1,8.1c0-1.5-0.6-3-1.7-4.1c-2.2-2.2-5.9-2.2-8.1,0C7.2,5.2,6.6,6.7,6.6,8.1h2.7l-3.5,3.5L2.3,8.1h2.7c0-1.9,0.7-3.8,2.2-5.2h0C10,0,14.7,0,17.6,2.9z M23,17c0,2.9-4.9,5.3-11,5.3c-6.1,0-11-2.4-11-5.3s4.9-5.3,11-5.3C18.1,11.7,23,14.1,23,17z M14.6,16.8c0-0.6-1.2-1-2.6-1s-2.6,0.5-2.6,1s1.2,1,2.6,1S14.6,17.4,14.6,16.8z"/>
</symbol>
<symbol id="icon-effect" viewBox="0 0 24 24">
<path d="M12,10.5c-6.1,0-11,2.4-11,5.3s4.9,5.3,11,5.3c6.1,0,11-2.4,11-5.3S18.1,10.5,12,10.5z M12,16.6c-1.4,0-2.6-0.5-2.6-1
c0-0.6,1.2-1,2.6-1s2.6,0.5,2.6,1C14.6,16.2,13.4,16.6,12,16.6z"/>
<path d="M19,2.9h0.4v4.7c0,0.6-0.6,1-1.4,1c-0.8,0-1.4-0.5-1.4-1s0.6-1,1.4-1c0.4,0,0.8,0.1,1,0.3V4.5l-3.2,0.7v3.1
c0,0.6-0.6,1-1.4,1c-0.8,0-1.4-0.5-1.4-1s0.6-1,1.4-1c0.4,0,0.8,0.1,1,0.3v-4L19,2.9z"/>
<polygon style="stroke:#FFFFFF;stroke-width:0.5;stroke-miterlimit:10;" points="6.1,13.6 3.8,3.9 7.6,3.6"/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 32 32">
<title>drop</title>
<path d="M17.333 32c-5.867 0-10.667-4.8-10.667-10.667 0-5.6 9.733-20.4 10.133-21.067 0.267-0.4 0.8-0.4 1.067 0 0.4 0.667 10.133 15.467 10.133 21.067 0 5.867-4.8 10.667-10.667 10.667zM17.333 1.867c-2.133 3.333-9.333 14.933-9.333 19.467 0 5.2 4.133 9.333 9.333 9.333s9.333-4.133 9.333-9.333c0-4.533-7.2-16.133-9.333-19.467z"></path>
<path d="M13.333 26.533c-0.133 0-0.267 0-0.4-0.133-1.467-1.333-2.267-3.2-2.267-5.067 0-1.6 1.2-4.533 3.467-8.933 0.133-0.4 0.533-0.533 0.933-0.267 0.267 0.133 0.4 0.533 0.267 0.933-2.133 4-3.333 6.933-3.333 8.267 0 1.467 0.667 2.933 1.733 4 0.267 0.267 0.267 0.667 0 0.933 0 0.133-0.267 0.267-0.4 0.267z"></path>
</symbol>
<symbol id="icon-vinyls" viewBox="0 0 32 32">
<title>vinyls</title>
<g style="fill: #933ec5">
<path d="M31.865 8.475l-0.194-0.206h-0.979l0.218-1.781c0.023-0.226-0.052-0.452-0.204-0.62s-0.37-0.265-0.597-0.265h-1.299v-1.871c0-0.438-0.357-0.794-0.795-0.794h-1.338v-1.871c0-0.438-0.357-0.794-0.795-0.794h-19.737c-0.438 0-0.794 0.357-0.794 0.794v1.871h-1.338c-0.438 0-0.794 0.357-0.794 0.794v1.871h-1.299c-0.227 0-0.445 0.097-0.597 0.265s-0.227 0.394-0.202 0.632l0.216 1.769h-0.73c-0.171 0-0.332 0.075-0.443 0.206l-0.163 0.219 3.177 22.316c0.074 0.416 0.433 0.719 0.856 0.719h23.961c0.422 0 0.782-0.301 0.859-0.736l3.138-22.047c0.030-0.168-0.017-0.34-0.126-0.47zM6.417 1.338h19.194v1.599h-19.194v-1.599zM4.284 4.004h23.459v1.599h-23.459v-1.599zM2.214 6.67h27.599l-0.196 1.599h-27.207l-0.196-1.599zM27.824 30.662h-23.619l-3.036-21.326h29.691l-3.035 21.326z"></path>
<path d="M15.747 10.935c-6.027 0-10.93 4.066-10.93 9.064s4.903 9.064 10.93 9.064 10.93-4.066 10.93-9.064-4.903-9.064-10.93-9.064zM15.747 27.996c-5.439 0-9.863-3.588-9.863-7.997s4.425-7.997 9.863-7.997 9.863 3.588 9.863 7.997-4.425 7.997-9.863 7.997z"></path>
<path d="M16.28 13.568c0-0.295-0.238-0.533-0.533-0.533-2.129 0-4.147 0.645-5.836 1.866-0.238 0.172-0.292 0.505-0.12 0.744 0.104 0.145 0.267 0.221 0.433 0.221 0.108 0 0.217-0.033 0.312-0.101 1.506-1.088 3.308-1.663 5.211-1.663 0.295 0 0.533-0.238 0.533-0.533z"></path>
<path d="M16.28 15.568c0-0.295-0.238-0.533-0.533-0.533-1.655 0-3.225 0.502-4.538 1.452-0.238 0.173-0.292 0.506-0.12 0.744 0.104 0.145 0.267 0.221 0.433 0.221 0.108 0 0.218-0.033 0.312-0.101 1.13-0.817 2.483-1.25 3.913-1.25 0.295 0 0.533-0.238 0.533-0.533z"></path>
<path d="M16.28 17.567c0-0.295-0.238-0.533-0.533-0.533-1.188 0-2.313 0.363-3.254 1.049-0.238 0.173-0.291 0.506-0.117 0.744 0.104 0.143 0.267 0.219 0.431 0.219 0.109 0 0.219-0.034 0.313-0.102 0.757-0.552 1.666-0.843 2.626-0.843 0.295 0 0.533-0.238 0.533-0.533z"></path>
<path d="M21.006 24.332c-1.506 1.089-3.308 1.664-5.211 1.664-0.295 0-0.533 0.238-0.533 0.533s0.238 0.533 0.533 0.533c2.129 0 4.147-0.645 5.836-1.866 0.238-0.173 0.292-0.506 0.12-0.744-0.172-0.239-0.506-0.293-0.745-0.12z"></path>
<path d="M15.262 24.529c0 0.295 0.238 0.533 0.533 0.533 1.656 0 3.226-0.502 4.538-1.452 0.239-0.173 0.292-0.506 0.12-0.744-0.173-0.239-0.506-0.292-0.744-0.12-1.13 0.818-2.483 1.25-3.913 1.25-0.295 0-0.534 0.238-0.534 0.533z"></path>
<path d="M15.262 22.53c0 0.295 0.238 0.533 0.533 0.533 1.189 0 2.314-0.363 3.254-1.049 0.237-0.173 0.29-0.507 0.116-0.745-0.173-0.237-0.506-0.29-0.745-0.116-0.756 0.552-1.664 0.843-2.626 0.843-0.295 0-0.533 0.238-0.533 0.533z"></path>
<path d="M17.199 19.99c0 0.497-0.555 0.901-1.241 0.901s-1.241-0.403-1.241-0.901c0-0.497 0.555-0.901 1.241-0.901s1.241 0.403 1.241 0.901z"></path>
</g>
</symbol>
<symbol id="icon-pause" viewBox="0 0 20 20">
<title>pause</title>
<path d="M15 3h-2c-0.553 0-1 0.048-1 0.6v12.8c0 0.552 0.447 0.6 1 0.6h2c0.553 0 1-0.048 1-0.6v-12.8c0-0.552-0.447-0.6-1-0.6zM7 3h-2c-0.553 0-1 0.048-1 0.6v12.8c0 0.552 0.447 0.6 1 0.6h2c0.553 0 1-0.048 1-0.6v-12.8c0-0.552-0.447-0.6-1-0.6z"></path>
</symbol>
<symbol id="icon-play" viewBox="0 0 20 20">
<title>play</title>
<path d="M15 10.001c0 0.299-0.305 0.514-0.305 0.514l-8.561 5.303c-0.624 0.409-1.134 0.106-1.134-0.669v-10.297c0-0.777 0.51-1.078 1.135-0.67l8.561 5.305c-0.001 0 0.304 0.215 0.304 0.514z"></path>
</symbol>
<symbol id="icon-prev" viewBox="0 0 20 20">
<title>prev</title>
<path d="M13.891 17.418c0.268 0.272 0.268 0.709 0 0.979s-0.701 0.271-0.969 0l-7.83-7.908c-0.268-0.27-0.268-0.707 0-0.979l7.83-7.908c0.268-0.27 0.701-0.27 0.969 0s0.268 0.709 0 0.979l-7.141 7.419 7.141 7.418z"></path>
</symbol>
<symbol id="icon-next" viewBox="0 0 20 20">
<title>next</title>
<path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
</symbol>
<symbol id="icon-stop" viewBox="0 0 20 20">
<title>stop</title>
<path d="M16 4.995v9.808c0 0.661-0.536 1.197-1.196 1.197h-9.807c-0.551 0-0.997-0.446-0.997-0.997v-9.807c0-0.66 0.536-1.196 1.196-1.196h9.808c0.55 0 0.996 0.446 0.996 0.995z"></path>
</symbol>
<symbol id="icon-lp-mini" viewBox="0 0 800 800">
<title>LP Mini</title>
<g style="fill: #181819; stroke: #141415; stroke-width: 1.5;">
<circle cx="400" cy="400" r="380" />
<circle cx="400" cy="400" r="370" />
<circle cx="400" cy="400" r="360" />
<circle cx="400" cy="400" r="350" />
<circle cx="400" cy="400" r="340" />
<circle cx="400" cy="400" r="330" />
<circle cx="400" cy="400" r="320" />
<circle cx="400" cy="400" r="310" />
<circle cx="400" cy="400" r="300" />
<circle cx="400" cy="400" r="290" />
<circle cx="400" cy="400" r="280" />
<circle cx="400" cy="400" r="270" />
<circle cx="400" cy="400" r="260" />
<circle cx="400" cy="400" r="250" />
<circle cx="400" cy="400" r="240" />
<circle cx="400" cy="400" r="230" />
<circle cx="400" cy="400" r="220" />
<circle cx="400" cy="400" r="210" />
<circle cx="400" cy="400" r="200" />
</g>
</symbol>
<symbol id="icon-tonearm" viewBox="0 0 800 800">
<!--circle cx="400" cy="400" r="400" stroke="pink" fill="none" stroke-width="3"/-->
<path style="fill:#7979D8;" d="M354.5,761.6l11.9,6.2c0,0,37.1-91.5,42.4-123.7c2.7-16.4-1.1-103.9-1.1-103.9V307.5h-14.7l-0.1,232.7c0,0,3.7,87.5,1.1,103.9C389,674.6,354.5,761.6,354.5,761.6z"/>
<rect x="379.7" y="239.7" style="fill:#474283;" width="40.7" height="67.8"/>
<circle style="fill:#fff;" cx="400" cy="400" r="22.6"/>
<path style="fill:#fff;" class="grabbable" d="M353,738.9l18.3-22.9l13.2,6.4l-6.2,28.7l-22.8,47.1c0,0-1.2,3.3-15.4-3.6c-11.2-5.4-10-8.7-10-8.7L353,738.9z"/>
</symbol>
</defs>
</svg>
<!-- SVGs -->
<main>
<div class="view view--grid view--current">
<header class="page-header">
<h1 class="page-header__title">Nusa Records</h1>
<p class="page-header__subtitle">Your classic record shop. Sell your old vinyls to us.</p>
</header>
<ul class="grid">
<li class="grid__item">
<a class="grid__link" href="#album-1" data-playlist-1="//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3,//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" data-playlist-2="//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3">
<div class="img-wrap img-wrap--grid">
<svg class="lp lp--grid">
<use xlink:href="#icon-lp-mini"></use>
</svg>
<img class="img img--grid" src="//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png" alt="album1" />
</div>
<span class="year">1999</span>
<h2 class="artist">Lena Glass</h2>
<h3 class="title">Blue Moments</h3>
</a>
</li>
<li class="grid__item grid__item--deco grid__item--deco-1">
<a class="grid__link" href="#album-2">
<div class="img-wrap img-wrap--grid">
<svg class="lp lp--grid">
<use xlink:href="#icon-lp-mini"></use>
</svg>
<img class="img img--grid" src="//repo.bfw.wiki/bfwrepo/image/600d6d2fbc572.png" alt="album2" />
</div>
<span class="year">1984</span>
<h2 class="artist">Peekaboo</h2>
<h3 class="title">Clear Nonsense</h3>
</a>
</li>
<li class="grid__item">
<a class="grid__link" href="#album-3">
<div class="img-wrap img-wrap--grid">
<svg class="lp lp--grid">
<use xlink:href="#icon-lp-mini"></use>
</svg>
<img class="img img--grid" src="//repo.bfw.wiki/bfwrepo/image/600d6d2fbc572.png" alt="album3" />
</div>
<span class="year">1989</span>
<h2 class="artist">Bright</h2>
<h3 class="title">Gone Again</h3>
</a>
</li>
<li class="grid__item">
<a class="grid__link" href="#album-1" data-playlist-1="//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3,//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" data-playlist-2="//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3">
<div class="img-wrap img-wrap--grid">
<svg class="lp lp--grid">
<use xlink:href="#icon-lp-mini"></use>
</svg>
<img class="img img--grid" src="//repo.bfw.wiki/bfwrepo/image/600d6d2fbc572.png" alt="album1" />
</div>
<span class="year">1999</span>
<h2 class="artist">Lena Glass</h2>
<h3 class="title">Blue Moments</h3>
</a>
</li>
<li class="grid__item grid__item--deco grid__item--deco-1">
<a class="grid__link" href="#album-2">
<div class="img-wrap img-wrap--grid">
<svg class="lp lp--grid">
<use xlink:href="#icon-lp-mini"></use>
</svg>
<img class="img img--grid" src="//repo.bfw.wiki/bfwrepo/image/600d6d2fbc572.png" alt="album2" />
</div>
<span class="year">1984</span>
<h2 class="artist">Peekaboo</h2>
<h3 class="title">Clear Nonsense</h3>
</a>
</li>
<li class="grid__item">
<a class="grid__link" href="#album-3">
<div class="img-wrap img-wrap--grid">
<svg class="lp lp--grid">
<use xlink:href="#icon-lp-mini"></use>
</svg>
<img class="img img--grid" src="//repo.bfw.wiki/bfwrepo/image/600d6d2fbc572.png" alt="album3" />
</div>
<span class="year">1989</span>
<h2 class="artist">Bright</h2>
<h3 class="title">Gone Again</h3>
</a>
</li>
</ul>
</div>
<!-- /view-grid -->
<div class="deco-expander"></div>
<div class="view view--player">
<button class="control-button control-button--back" aria-label="Back to album slideshow">
<svg class="icon icon--arrow">
<use xlink:href="#icon-arrow"></use>
</svg>
</button>
<div class="player-info">
<h2 class="artist artist--player">Lena Glass</h2>
<h3 class="title title--player">Blue Moments</h3>
<span class="year year--player">1999</span>
</div>
<div class="player-stand">
<div class="visualizer"></div>
<span class="song"></span>
<div class="player__controls">
<button class="player-button player-button--rotate" aria-label="Rotate LP">
<svg class="icon icon--rotate">
<use xlink:href="#icon-rotate"></use>
</svg>
</button>
<button class="player-button player-button--playstop" aria-label="Play or Stop">
<svg class="icon icon--play icon--hidden">
<use xlink:href="#icon-play"></use>
</svg>
<svg class="icon icon--stop">
<use xlink:href="#icon-stop"></use>
</svg>
</button>
</div>
</div>
<div class="player">
<div class="player__element player__element--lp">
<div class="player__element-inner">
<svg class="player__svg-lp" viewBox="0 0 800 800">
<title>LP</title>
<path fill="#181819" d="M400,1C179.6,1,1,179.6,1,400s178.6,399,399,399s399-178.6,399-399S620.4,1,400,1zM400,409.8c-5.4,0-9.8-4.4-9.8-9.8s4.4-9.8,9.8-9.8s9.8,4.4,9.8,9.8S405.4,409.8,400,409.8z" />
<g stroke-width="1.5" stroke="#141415" fill="#181819">
<path d="M400,20C190.1,20,20,190.1,20,400s170.1,380,380,380s380-170.1,380-380S609.9,20,400,20z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,30C195.7,30,30,195.6,30,400s165.7,370,370,370s370-165.7,370-370S604.3,30,400,30z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,40C201.2,40,40,201.2,40,400s161.2,360,360,360s360-161.2,360-360S598.8,40,400,40z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,50C206.7,50,50,206.7,50,400s156.7,350,350,350s350-156.7,350-350S593.3,50,400,50z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,60C212.2,60,60,212.2,60,400s152.2,340,340,340s340-152.2,340-340S587.8,60,400,60z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,70C217.8,70,70,217.8,70,400s147.8,330,330,330s330-147.8,330-330S582.2,70,400,70z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,80C223.3,80,80,223.3,80,400s143.3,320,320,320s320-143.3,320-320S576.7,80,400,80z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,90C228.8,90,90,228.8,90,400s138.8,310,310,310s310-138.8,310-310S571.2,90,400,90z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,100c-165.7,0-300,134.3-300,300s134.3,300,300,300s300-134.3,300-300S565.7,100,400,100z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,110c-160.2,0-290,129.8-290,290s129.8,290,290,290s290-129.8,290-290S560.2,110,400,110z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,120c-154.6,0-280,125.4-280,280s125.4,280,280,280s280-125.4,280-280S554.6,120,400,120z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,130c-149.1,0-270,120.9-270,270s120.9,270,270,270s270-120.9,270-270S549.1,130,400,130z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,140c-143.6,0-260,116.4-260,260s116.4,260,260,260s260-116.4,260-260S543.6,140,400,140z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,150c-138.1,0-250,111.9-250,250s111.9,250,250,250s250-111.9,250-250S538.1,150,400,150z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,160c-132.5,0-240,107.5-240,240s107.5,240,240,240s240-107.5,240-240S532.5,160,400,160z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5S407.8,414.8,399.2,414.8z"/>
<path d="M400,170c-127,0-230,103-230,230s103,230,230,230s230-103,230-230S527,170,400,170z M399.2,414.8c-8.6,0-15.5-6.9-15.5-15.5s6.9-1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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