暗红色调的音乐播放器设计

Music Player 点击向下的箭头，将弹出播放列表，带弹性碰撞效果。

html5, player

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*Click on the down arrow to see some phisical-based animation :D*/

'use strict';

var transform = function transform(el, what) {
    el.style.mozTransform = el.style.msTransform = el.style.webkitTransform = el.style.transform = what;
};

var player = document.querySelector('#player');

var caretUp = document.querySelector('.fa-angle-up');
var caretDown = document.querySelector('.fa-angle-down');
var divDown = document.querySelector('.scrollDown');

var spring = new rebound.SpringSystem();

var animation = spring.createSpring(60, 5);

var scrollDown = spring.createSpring(70, 7);

var expand = function expand(el, val) {
    transform(el, 'scale(' + val + ',' + val + ')');
};

var down = function down(el, val) {
    el.style.top = '-' + val + '%';
};

animation.addListener({
    onSpringUpdate: function onSpringUpdate(spring) {
        var current = spring.getCurrentValue();
        var val = rebound.MathUtil.mapValueInRange(current, 0, 1, 0.5, 1);
        expand(player, val);
    }
});

scrollDown.addListener({
    onSpringUpdate: function onSpringUpdate(spring) {
        var current = spring.getCurrentValue();
        var val = rebound.MathUtil.mapValueInRange(current, 0, 1, 140, 30);
        down(divDown, val);
    }
});

caretDown.addEventListener('click', function() {
    scrollDown.setEndValue(1);
});

caretUp.addEventListener('click', function() {
    scrollDown.setEndValue(0);
});

document.addEventListener('DOMContentLoaded', function() {
    animation.setEndValue(1);
});

编译

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(http://weloveiconfonts.com/api/?family=iconicfill);
[class*="iconicfill-"]:before {
    font-family: 'IconicFill', sans-serif;
    font-size: 2rem;
    position: relative;
    top: -0.3rem;
}
.left {
    float: left;
}
.right {
    float: right;
}
.fa.fa-angle-up,
.fa.fa-angle-down {
    cursor: pointer;
}
body {
    background: -webkit-linear-gradient(top, rgba(153, 192, 150, 0.85), rgba(153, 192, 150, 0.85)), url(http://www.disclosureshop.com/img/logo.png);
    background: linear-gradient(to bottom, rgba(153, 192, 150, 0.85), rgba(153, 192, 150, 0.85)), url(http://www.disclosureshop.com/img/logo.png);
    background-size: 100%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    min-height: 100vh;
}
#player {
    overflow: hidden;
    border-radius: 5px;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    position: absolute;
    height: 500px;
    width: 350px;
    background: black;
    top: calc(50% - 250px);
    left: calc(50% - 175px);
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.4);
}
#player .scrollDown {
    position: absolute;
    height: 130%;
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    top: -140%;
    z-index: 2;
}
#player .scrollDown .content {
    position: absolute;
    bottom: 0;
    height: 77%;
    width: 100%;
    padding: 10px 17px;
    box-sizing: border-box;
    color: #99c096;
}
#player .scrollDown .content .header {
    font-size: 1.5rem;
    margin-bottom: 20px;
}
#player .scrollDown .content span {
    display: inline-block;
    font-weight: 300;
}
#player .scrollDown .content span:first-child {
    min-width: 20px;
}
#player .scrollDown .content span:nth-child(2) {
    min-width: 230px;
    max-width: 200px;
    padding-left: 15px;
    box-sizing: border-box;
    font-weight: 400;
}
#player .scrollDown .content h3 {
    font-family: "Montserrat", sans-serif;
    margin-top: 40px;
    padding-left: 15px;
    font-size: 2.6rem;
    margin-bottom: 40px;
}
#player .scrollDown .content ul {
    list-style: none;
    padding-left: 20px;
}
#player .scrollDown .content ul li {
    font-family: "Lato", sans-serif;
    font-size: .843rem;
    margin-bottom: 15px;
    margin-left: 0;
    color: rgba(255, 255, 255, 0.8);
}
#player .scrollDown .content span.fa-angle-up {
    min-width: 10px;
    font-size: 2rem;
    float: right;
}
#player .top {
    position: relative;
    color: white;
}
#player .top .floating {
    position: absolute;
    font-size: 2rem;
    right: 5%;
    top: 10px;
}
#player .top .container {
    font-family: 'Montserrat', sans-serif;
    margin-top: -100px;
    padding: 0 10%;
}
#player .top .container p {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.35);
    font-size: .9rem;
}
#player .top .container h3 {
    font-size: 3rem;
    margin: -19px 0 10px;
}
#player .top .container h3 .iconicfill-pause {
    float: right;
    color: #99c096;
    position: relative;
    top: 2px;
}
#player .top .container h3 .iconicfill-pause:before {
    font-size: 1.5rem;
}
#player .top .cover {
    width: 100%;
    padding: 50% 0;
    background: -webkit-linear-gradient(top, transparent, black), url(https://consequenceofsound.files.wordpress.com/2015/07/screen-shot-2015-07-27-at-7-58-42-am.png?w=746);
    background: linear-gradient(to bottom, transparent, black), url(https://consequenceofsound.files.wordpress.com/2015/07/screen-shot-2015-07-27-at-7-58-42-am.png?w=746);
    background-size: contain;
}
#player .top .timing {
    margin-bottom: 15px;
    margin-top: 40px;
    padding: 0 10% 20px;
    font-family: "Montserrat", sans-serif;
    font-size: .9rem;
    color: rgba(255, 255, 255, 0.9);
}
#player .top .timing span:before,
#player .top .timing span:after {
    clear: both;
}
#player .top .timing span:last-child {
    color: rgba(153, 153, 153, 0.45);
}
#player .top .progress {
    width: 80%;
    height: 1px;
    background: rgba(153, 153, 153, 0.45);
    margin: 0 auto;
    position: relative;
}
#player .top .progress:before {
    background: #99c096;
    width: 35%;
    height: 100%;
    content: "";
    display: block;
    -webkit-transition: all .5s;
    transition: all .5s;
}
#player .bottom {
    position: absolute;
    z-index: 1;
    bottom: 0;
    padding: 15px 10% 20px;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.5rem;
}
#player .bottom span {
    -webkit-transition: all .5s;
    transition: all .5s;
    color: rgba(153, 153, 153, 0.3);
    position: relative;
}
#player .bottom span:first-child {
    left: 0;
}
#player .bottom span:nth-child(2) {
    left: 35%;
}
#player .bottom span:last-child {
    left: 70%;
}
#player .bottom span:hover {
    color: rgba(153, 153, 153, 0.6);
}
#player .bottom .iconicfill-loop-alt3:before {
    top: 0.15rem;
    color: #99c096;
}

HTML

</div>
</div>

Music Player 点击向下的箭头，将弹出播放列表，带弹性碰撞效果。

html5, player

编辑器支持Emmet

快捷键

Music Player 点击向下的箭头，将弹出播放列表，带弹性碰撞效果。

html5, player

一款粉红色调典雅风格的音乐播放器

基于RxJS实现的3D悬浮卡片音乐播放器（含亮色和暗色界面方案切换）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：