加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
旅梦5-1.css 3.14 KB
一键复制 编辑 原始数据 按行查看 历史
无尘 提交于 2022-06-21 19:45 . 5.1补充
*{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.music{
width: 100%;
height: 100%;
}
.bg{
width: 100%;
height: 400px;
background: url(http://5b0988e595225.cdn.sohucs.com/images/20180921/0e3cc4ed20ae4fc494e4855310a0b3b2.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
filter: blur(10px);
position: absolute;
z-index: -1;
}
header{
height: 40px;
font-size: 1.2rem;
font-family: SourceHanSansCN;
font-weight: 400;
line-height: 40px;
color: #fff;
text-align: center;
}
.content{
width: 100%;
height: calc(100vh - 13rem);
background: #fff;
position: absolute;
bottom: 0;
border-top-left-radius: 31px;
border-top-right-radius: 31px;
box-shadow: 0px 0px 10px #eee;
}
@media screen and (min-width:410px){
html{
font-size: 14px;
}
}
/*
@media screen and (min-width:500px){
header{
font-size: 16px;
}
} */
.picture{
width: 25.6rem;
height: 28.3rem;
overflow: hidden;
border-radius: 40px;
margin: 0 auto;
/* margin-top: -4rem; */
position: relative;
top: -4rem;
box-shadow: 0px 10px 10px rgb(185, 174, 174);
}
.picture img{
height: 100%;
}
.name{
text-align: center;
font-family: SourceHanSansCN;
color: #000000;
}
.name h1{
font-size: 2.1rem;
font-weight: bold;
}
.name p{
margin-top: 5px;
}
.bar{
width: 22.6rem;
height: 0.1rem;
background: #c6c6c6;
margin-top: 5.1rem;
margin-left: 8.2rem;
}
.slide{
width: 11.8rem;
height: 0.2rem;
background: #f03030;
margin-top: -0.1rem;
}
.time-progress{
width: 100%;
display: flex;
}
.progress{
font-size: 0.7rem;
font-family: SourceHanSansCN;
font-weight: bold;
color: #9EA0AD;
line-height: 2.5rem;
margin-left: 7.8rem;
}
.time{
font-size: 7px;
font-family: SourceHanSansCN;
font-weight: bold;
color: #9EA0AD;
line-height: 25px;
margin-left: 17rem;
}
.Icons{
width: 100%;
}
.tu1{
width: 2.5rem;
height: 2.1rem;
margin-left: 7.2rem;
}
.tu2{
width: 3rem;
height: 2.4rem;
margin-left: 1.5rem;
}
.tu3{
width: 4.9rem;
height: 4.8rem;
position: relative;
top: 1.2rem;
left: 2rem;
}
.tu4{
width: 3rem;
height: 2.4rem;
margin-left: 3.8rem;
}
.tu5{
width: 2.4rem;
height: 2.4rem;
margin-left: 1.5rem;
}
.footer{
display: flex;
margin-top: 2rem;
}
.biao1{
margin-left: 7.5rem;
width: 1.9rem;
height: 1.9rem;
border: 1px solid #8370a8;
border-radius: 50%;
}
.biao1 p{
margin-top: 0.9rem;
margin-right: 0.5rem;
transform: scale(0.5);
font-family: SourceHanSansCN;
font-weight: 800;
color: #8370A8;
line-height: 0.3px;
}
.biao2{
margin-left: 19.5rem;
width: 1.9rem;
height: 1.9rem;
border: 1px solid #8370a8;
border-radius: 50%;
}
.biao2 p{
margin-top: 0.9rem;
margin-right: 0.5rem;
transform: scale(0.5);
font-family: SourceHanSansCN;
font-weight: 800;
color: #8370A8;
line-height: 0.3px;
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化