CSS弦樂下載:
/* 定義弦樂器樣式 */ .instrument{ width: 200px; height: 400px; background-color: #f2f2f2; border: 1px solid #ccc; margin: 20px; padding: 10px; position: relative; } /* 定義琴弦樣式 */ .string{ width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 80px solid #000; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } /* 六弦 */ .string:nth-of-type(1){ top: 50px; } .string:nth-of-type(2){ top: 100px; } .string:nth-of-type(3){ top: 150px; } .string:nth-of-type(4){ top: 200px; } .string:nth-of-type(5){ top: 250px; } .string:nth-of-type(6){ top: 300px; } /* 音頭 */ .head{ width: 30px; height: 30px; background-color: #000; border-top-right-radius: 50%; border-top-left-radius: 50%; position: absolute; top: -31px; left: 50%; transform: translateX(-50%); } /* 弦盒子 */ .box{ width: 200px; height: 50px; background-color: #fff; border: 1px solid #ccc; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } /* 弦頭 */ .box span{ display: inline-block; width: 15px; height: 15px; background-color: #000; border-radius: 50%; margin-right: 5px; margin-top: 17px; } /* 弦名 */ .box p{ display: inline-block; font-size: 14px; color: #000; margin: 0; margin-top: 13px; }
這是一個基本的弦樂器CSS樣式,您可以在其基礎(chǔ)上任意變換,實現(xiàn)您所需的弦樂器效果。