CSS是一种用于网页布局和样式的语言。今天我们将使用CSS来制作一个会动的音乐图标。
.music-icon { width: 50px; height: 50px; border-radius: 50%; background-color: #ff4b4b; position: relative; animation: move 2s ease-in-out infinite; } .music-icon::before { content: ""; width: 10px; height: 30px; background-color: white; position: absolute; top: 10px; left: 20px; border-radius: 5px; transform: rotate(45deg); } .music-icon::after { content: ""; width: 10px; height: 30px; background-color: white; position: absolute; top: 10px; right: 20px; border-radius: 5px; transform: rotate(-45deg); } @keyframes move { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
代码解释:
首先我们创建一个圆形的div来作为音乐图标,并设置它的宽度、高度、边框半径和背景颜色。位置设置为相对定位,因为我们需要在其中创建两个元素。
我们使用伪元素::before和::after来创建音符。共有两个音符,分别在音乐图标的左侧和右侧。我们为它们设置宽度、高度、背景颜色、位置和旋转角度。
最后,我们使用@keyframes来创建一个动画。动画名称为“move”,持续时间为2秒,使用ease-in-out函数让动画先缓慢后快,然后再慢下来。我们将动画应用于音乐图标,并设置为无限循环。
现在,我们已经完成了一个会动的音乐图标!