css制作一个会动的音乐图标

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函数让动画先缓慢后快，然后再慢下来。我们将动画应用于音乐图标，并设置为无限循环。

现在，我们已经完成了一个会动的音乐图标！