html界面css的设计
头部的设计代码
.head{
top: 0;
height: 50px;
line-height: 50px;
background: #19A033;
text-align: center;
font-size: 1.2em;
letter-spacing: 5px;
}
关于logo设计以及logo旋转的代码
logo{
position: absolute;
top: 12px;
left: 80px;
display: inline-block;
width: 27px;
height: 27px;
background: url(../img/logo.png) no-repeat;
background-size: 156px 27px;
animation: cycle 2s infinite linear;
}
@-webkit-keyframes cycle{
form{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
底部的数值代码
.foot{
bottom: 0;
height: 70px;
background: #19A033;
}
关于光标点到歌曲上的反应时间代码及数值
.item{
display: flex;
height: 50px;
line-height: 50px;
font-size: 0.8em;
border-bottom: 1px solid rgba(0,0,0,0.3);
cursor: pointer;
transition: all .8s;
}
歌曲图标的旋转代码
.active-play{
animation:cycle 3s infinite linear;
}
伪对象选择器设置webkit内核浏览器中滚动的效果
::-webkit-scrollbar{
width:5px;
background: #eee;
效果图