CSS实践总结

css 实践总结
case

.aper {
  --aper-color: #6366f1;
  --hover-color: #84858d2e;
}

.lyrics-container {
    height: 100%;   // 高度100%
    display: flex;  // flex 布局
    flex-direction: column; // flex-竖向
    padding-left: 78px;
    width: calc(100% - 8px); // 元素的宽度设置为父元素宽度的百分之百减去8像素。
    max-width: 460px;
    overflow-y: auto;
    transition: 0.5s; // 透明度 0.5
    scrollbar-width: none; // 没有滚动条
    .line {
      margin: 2px 0;
      padding: 12px 18px;
      transition: 0.5s; // 过渡效果将在0.5秒内完成
      border-radius: 12px;

      &:hover {
        background: var(--color-secondary-bg-for-transparent); // sass 定义的变量
      }

      .content {
        transform-origin: center left; // 放缩点
        transform: scale(0.95); // 缩小为0.95
        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); // 过渡效果；all 所有属性,；0.35 持续0.35秒；过渡的加速曲线
      }
    }
  }


  .slider {
    input[type="range"] {
      appearance: none !important; // 元素的外观（如按钮、复选框、滚动条等）。通过使用none值，可以取消默认的外观样式。
      background: -webkit-linear-gradient(var(--aper-color), var(--aper-color))
          no-repeat,
        var(--hover-color);
      background-size: var(--range) 100%; 
      border-radius: 3px;
      border: none;
      outline: none;
      cursor: pointer;
      // 是一个用于自定义滑块（滑动输入条）拇指（thumb）样式的CSS伪元素选择器。它是针对WebKit浏览器引擎（如Google Chrome和Safari）的私有前缀。
      // 滑块拇指是滑块控件中可拖动的部分，用于调整滑块的值。通过使用 -webkit-slider-thumb 选择器，您可以自定义滑块拇指的样式，例如更改其大小、背景颜色、边框等。
      &::-webkit-slider-thumb { 
        appearance: none !important;
        width: 10px;
        height: 10px;
        background: var(--aper-color);
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }
case​

case
