CSS弦樂配置

/* 用CSS配置弦樂樣式 */
/* 弦樂 */
.violin {
width: 400px;
height: 150px;
position: relative;
}
/* 指板 */
.fingerboard {
width: 390px;
height: 10px;
background-color: #7b3503;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
/* 弦 */
.string {
width: 1px;
height: 80px;
background-color: #e6c0a2;
position: absolute;
top: 40px;
left: 55%;
transform: translateX(-50%);
z-index: 2;
}
.string:nth-child(2) {
left: 64%;
}
.string:nth-child(3) {
left: 73%;
}
.string:nth-child(4) {
left: 82%;
}
/* 弓 */
.bow {
width: 75px;
height: 5px;
background-color: #5b2101;
position: absolute;
top: 25%;
left: 0;
z-index: 3;
animation: bow 2s ease-in-out infinite;
}
@keyframes bow {
0% {
transform: rotate(0deg);
left: 0;
}
50% {
transform: rotate(20deg);
left: 60%;
}
100% {
transform: rotate(0deg);
left: 0;
}
}
/* 弓毛 */
.hair {
width: 78px;
height: 60px;
border-radius: 20px;
border: 2px solid #5b2101;
position: absolute;
top: 20%;
left: 0;
z-index: 4;
}
/* 音柱 */
.sound-post {
width: 10px;
height: 80px;
background-color: #5b2101;
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}