css作曲 |iconfont css

/* 以CSS代码方式表示一个音符 */
.note {
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
background: black;
left: 200px;
top: 100px;
}

在上面的代码中，.note表示音符，position: absolute;让它可以与 HTML 的其他部分分离出来移动，height和width控制音符大小，border-radius是圆角效果，background设为黑色。设定left和top两个属性可以让音符移动到特定的位置。

/* 以CSS代码方式表示乐谱 */
.music {
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
}
.music::before {
content: "♪";
color: black;
margin-right: 10px;
}
.music::after {
content: attr(data-notes);
color: blue;
}

在上面的代码中，.music表示乐谱，里面放置着音符。使用display: flex;这个属性，可以把音符放置到中央，justify-content和align-items可以使它居中。font-size、::before和::after也是必不可少的。

至此，大家已经可以使用 CSS 进行一些简单的音乐作曲了。制作复杂的音乐还需要更多的技巧，但是这些基本的概念已经足够让大家开始探索 CSS 音乐世界的可能性。