实用性很高的CSS片段,建议收藏

自定义滚动条

html代码

<div class="custom-scrollbar">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
</div>

CSS代码

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}

• ::-webkit-scrollbar 定位整个滚动条元素。
• ::-webkit-scrollbar-track 仅针对滚动条轨道。
• ::-webkit-scrollbar-thumb 瞄准滚动条拇指。

效果图

自定义文本选择效果

<p class="custom-text-selection">Select some of this text.</p>

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

::selection定义元素上的伪选择器，以便在选定元素时设置其中文本的样式。请注意，如果不组合任何其他选择器，则样式将在文档根级别应用于任何可选元素。
效果图

纯CSS的loading

html

<div class="donut"></div>

css

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

效果图 可以动的

清除浮动

html

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>

css

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.floated {
  float: left;
}

等宽高比

给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。

<div class="constant-width-to-height-ratio"></div>

.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
}
.constant-width-to-height-ratio::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: '';
  display: block;
  clear: both;
}

悬停下划线动画

当文本悬停在上面时创建动画下划线效果。
html

<p class="hover-underline-animation">Hover this text to see the effect!</p>

css

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

• display: inline-block 使块p成为 inline-block 以防止下划线跨越整个父级宽度而不仅仅是内容(文本)。
• position: relative 在元素上为伪元素建立笛卡尔定位上下文。
• ::after 定义伪元素。
• position: absolute 从文档流中取出伪元素，并将其相对于父元素定位。
• width: 100% 确保伪元素跨越文本块的整个宽度。
• transform: scaleX(0) 最初将伪元素缩放为0，使其没有宽度且不可见。
• bottom: 0 和left: 0 将其放置在块的左下方。
• transition: transform 0.25s ease-out意味着transform变化将通过ease-out 时间功能在0.25秒内过渡。
• transform-origin: bottom right 表示变换锚点位于块的右下方。
• :hover::after 然后使用scaleX(1) 将宽度转换为100％，然后将transform-origin 更改为bottom left 以便定位点反转，从而允许其在悬停时转换到另一个方向。

效果图

鼠标光标渐变跟踪

html

<button class="mouse-cursor-gradient-tracking">
  <span>Hover me</span>
</button>

css

.mouse-cursor-gradient-tracking {
  position: relative;
  background: #7983ff;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}
.mouse-cursor-gradient-tracking span {
  position: relative;
}
.mouse-cursor-gradient-tracking::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.mouse-cursor-gradient-tracking:hover::before {
  --size: 200px;
}

js

var btn = document.querySelector('.mouse-cursor-gradient-tracking')
btn.onmousemove = function(e) {
  var x = e.pageX - btn.offsetLeft
  var y = e.pageY - btn.offsetTop
  btn.style.setProperty('--x', x + 'px')
  btn.style.setProperty('--y', y + 'px')
}

如果元素的父级具有定位上下文(position: relative)，您还需要减去它的偏移量。

var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop

效果图

同级变淡

淡出悬停项目的同级。

<div class="sibling-fade">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
  <span>Item 5</span>
  <span>Item 6</span>
</div>

span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}