HTML5一款圆角方形卡片形的音乐播放器

使用了@font-face base64编码的字体图标库。

html5, player

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2335
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@font-face {
  font-family: 'icons';
  src: url('data:application/octet-stream;base64,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') format('woff'),
       url('data:application/octet-stream;base64,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IVktsDossAAWILAIQyAuRyNHI2EgYLAgYGawAmIgsABQWLBAYFlmsAFjIyAgPIo4LbA7LCMgLkawAiVGUlggPFkusSsBFCstsDwsIyAuRrACJUZQWCA8WS6xKwEUKy2wPSwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xKwEUKy2wPiywNSsjIC5GsAIlRlJYIDxZLrErARQrLbA/LLA2K4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrErARQrsARDLrArKy2wQCywABawBCWwBCYgLkcjRyNhsAlDKyMgPCAuIzixKwEUKy2wQSyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAJQysgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2GwAiVGYTgjIDwjOBshICBGI0ewASsjYTghWbErARQrLbBCLLA1Ky6xKwEUKy2wQyywNishIyAgPLAEI0IjOLErARQrsARDLrArKy2wRCywABUgR7AAI0KyAAEBFRQTLrAxKi2wRSywABUgR7AAI0KyAAEBFRQTLrAxKi2wRiyxAAEUE7AyKi2wRyywNCotsEgssAAWRSMgLiBGiiNhOLErARQrLbBJLLAII0KwSCstsEossgAAQSstsEsssgABQSstsEwssgEAQSstsE0ssgEBQSstsE4ssgAAQistsE8ssgABQistsFAssgEAQistsFEssgEBQistsFIssgAAPistsFMssgABPistsFQssgEAPistsFUssgEBPistsFYssgAAQCstsFcssgABQCstsFgssgEAQCstsFkssgEBQCstsFossgAAQystsFsssgABQystsFwssgEAQystsF0ssgEBQystsF4ssgAAPystsF8ssgABPystsGAssgEAPystsGEssgEBPystsGIssDcrLrErARQrLbBjLLA3K7A7Ky2wZCywNyuwPCstsGUssAAWsDcrsD0rLbBmLLA4Ky6xKwEUKy2wZyywOCuwOystsGgssDgrsDwrLbBpLLA4K7A9Ky2waiywOSsusSsBFCstsGsssDkrsDsrLbBsLLA5K7A8Ky2wbSywOSuwPSstsG4ssDorLrErARQrLbBvLLA6K7A7Ky2wcCywOiuwPCstsHEssDorsD0rLbByLLMJBAIDRVghGyMhWUIrsAhlsAMkUHiwARUwLQBLuADIUlixAQGOWbABuQgACABjcLEABUKyAAEAKrEABUKzCgIBCCqxAAVCsw4AAQgqsQAGQroCwAABAAkqsQAHQroAQAABAAkqsQMARLEkAYhRWLBAiFixA2REsSYBiFFYugiAAAEEQIhjVFixAwBEWVlZWbMMAgEMKrgB/4WwBI2xAgBEAAA=') format('truetype');
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-facebook:before { content: '\e804'; } /* '' */
.icon-vk:before { content: '\e805'; } /* '' */
.icon-youtube:before { content: '\e806'; } /* '' */
.icon-volume:before { content: '\e808'; } /* '' */
.icon-shuffle:before { content: '\e809'; } /* '' */
.icon-repeat:before { content: '\e80a'; } /* '' */
.icon-prev:before { content: '\e80b'; } /* '' */
.icon-play:before { content: '\e80c'; } /* '' */
.icon-next:before { content: '\e80d'; } /* '' */
.icon-list:before { content: '\e80e'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */

html,
body {
    min-height: 100%;
}
body {
    background: -webkit-radial-gradient(center ellipse, #564c84 0%, #0c0b17 100%);
    background: radial-gradient(ellipse at center, #564c84 0%, #0c0b17 100%);
}
.player {
    box-shadow: 0 2px 4px -4px rgba(0, 0, 0, 0.4), 0 50px 35px -20px rgba(0, 0, 0, 0.4);
    border-radius: 30px;
    height: 400px;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
    width: 400px;
}
.player__meta {
    box-sizing: border-box;
    font-size: 24px;
    padding: 50px 20px;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    top: 0;
    width: 100%;
    z-index: 1;
}
.player__artist {
    font-weight: 300;
}
.player__bg {
    background-position: bottom center;
    background-size: cover;
    height: 100%;
    position: absolute;
    width: 100%;
}
.player__bg:before,
.player__bg:after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.player__bg:after {
    background: -webkit-linear-gradient(bottom, #000, #fff);
    background: linear-gradient(to top, #000, #fff);
    opacity: 0.2;
    mix-blend-mode: soft-light;
}
.player__controls {
    background-color: rgba(255, 255, 255, 0.2);
    bottom: 0;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
    height: 80px;
    position: absolute;
    width: 100%;
}
.player__controls:before,
.player__controls:after {
    content: "";
    height: 100%;
    display: block;
    pointer-events: none;
    position: absolute;
    width: 100%;
}
.player__controls:before {
    box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.6);
    mix-blend-mode: soft-light;
}
.player__controls-bg {
    background-position: bottom center;
    background-size: cover;
    height: 100%;
    -webkit-filter: blur(30px);
    filter: blur(30px);
    overflow: hidden;
    position: absolute;
    width: 100%;
}
.player__controls-bg:before {
    background: -webkit-linear-gradient(bottom, #000, #fff);
    background: linear-gradient(to top, #000, #fff);
    content: "";
    display: block;
    height: 100%;
    opacity: 0.08;
    mix-blend-mode: soft-light;
    position: absolute;
    width: 100%;
}
.player__play,
.player__prev,
.player__next {
    background: rgba(255, 255, 255, 0.01);
    border-radius: 60px;
    bottom: 0;
    box-shadow: 0 -2px 4px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background 0.15s linear;
    transition: background 0.15s linear;
}
.player__play .player__icon,
.player__prev .player__icon,
.player__next .player__icon {
    -webkit-transition: -webkit-transform 0.05s linear;
    transition: -webkit-transform 0.05s linear;
    transition: transform 0.05s linear;
    transition: transform 0.05s linear, -webkit-transform 0.05s linear;
}
.player__play:before,
.player__play:after,
.player__prev:before,
.player__prev:after,
.player__next:before,
.player__next:after {
    border-radius: 60px;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.player__play:before,
.player__prev:before,
.player__next:before {
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    background: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    box-shadow: 0 -1px 1px 0 rgba(255, 255, 255, 0.6);
    mix-blend-mode: overlay;
}
.player__play:after,
.player__prev:after,
.player__next:after {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6);
    mix-blend-mode: soft-light;
}
.player__play:hover,
.player__prev:hover,
.player__next:hover {
    background: -webkit-radial-gradient(center ellipse, rgba(12, 11, 23, 0.4) 0%, rgba(86, 76, 132, 0.1) 60%, rgba(255, 255, 255, 0.2) 100%);
    background: radial-gradient(ellipse at center, rgba(12, 11, 23, 0.4) 0%, rgba(86, 76, 132, 0.1) 60%, rgba(255, 255, 255, 0.2) 100%);
}
.player__play:hover .player__icon,
.player__prev:hover .player__icon,
.player__next:hover .player__icon {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
.player__play {
    height: 60px;
    width: 60px;
}
.player__prev,
.player__next {
    height: 40px;
    width: 40px;
}
.player__prev {
    right: 120px;
}
.player__next {
    left: 120px;
}
.player__icon {
    bottom: 0;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    height: 1em;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 1.4em;
}
.player__icon:before {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}
.player__icon-play {
    font-size: 30px;
    width: 1.2em;
}
.player__icon-prev,
.player__icon-next {
    width: 1.4em;
}
.player__repeat {
    left: 0.5em;
    width: 1.4em;
}
.player__shuffle {
    right: 0.5em;
    width: 2em;
}
.player__repeat,
.player__shuffle {
    bottom: 0;
    color: #1A0C1D;
    height: 1.2em;
    font-size: 30px;
    margin: auto;
    position: absolute;
    top: 0;
}
.player__list {
    height: 1.2em;
    font-size: 20px;
    left: 20px;
    position: absolute;
    top: 30px;
    width: 1.4em;
    z-index: 1;
}
.player__volume {
    height: 1.2em;
    font-size: 26px;
    right: 20px;
    position: absolute;
    top: 30px;
    width: 1.4em;
    z-index: 1;
}

HTML

<div class="player">
    <div class="player__list">
        <div class="player__icon player__icon-list icon-list"></div>
    </div>
    <div class="player__volume">
        <div class="player__icon player__icon-volume icon-volume"></div>
    </div>
    <div class="player__meta">
        <div class="player__song">Queenie Eye</div>
        <div class="player__artist">Paul McCartney — New</div>
    </div>
    <div class="player__bg" style="background-image: url(https://ivanodintsov.ru/uploads/player_bg.jpg)"></div>
    <div class="player__controls">
        <div class="player__controls-bg" style="background-image: url(https://ivanodintsov.ru/uploads/player_bg.jpg)"></div>
        <div class="player__repeat">
            <div class="player__icon player__icon-repeat icon-repeat"></div>
        </div>
        <div class="player__prev">
            <div class="player__icon player__icon-prev icon-prev"></div>
        </div>
        <div class="player__play">
            <div class="player__icon player__icon-play icon-play"></div>
        </div>
        <div class="player__next">
            <div class="player__icon player__icon-next icon-next"></div>
        </div>
        <div class="player__shuffle">
            <div class="player__icon player__icon-shuffle icon-shuffle"></div>
        </div>
    </div>
</div>

使用了@font-face base64编码的字体图标库。

html5, player

编辑器支持Emmet

快捷键

使用了@font-face base64编码的字体图标库。

html5, player

HTML5/SVG转盘形状的图片轮播器

HTML5一款漂亮的内含花朵的正方形动画背景图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：