实用性很高的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; }