首页专栏详情
打赏
实用性很高的CSS片段,建议收藏
易百纳技术社区 不完整教程 2020-12-08 10:17:40

自定义滚动条

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: 0left: 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;
}
打赏
共1人已赏
完整的教程https://fizzz.blog.csdn.net。该网站都是残缺
评论
0个
内容存在敏感词
相关专栏
打赏作者
易百纳技术社区
不完整教程
您的支持将鼓励我继续创作!
打赏金额:
¥1 易百纳技术社区
¥5 易百纳技术社区
¥10 易百纳技术社区
¥50 易百纳技术社区
¥100 易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区 微信支付
易百纳技术社区
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

审核成功

发布时间设置
发布时间:

审核失败

失败原因
备注
Loading...
易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区
易百纳技术社区
在专栏模块发布专栏,可获得其他E友的打赏
易百纳技术社区
回答悬赏问答,被题主采纳后即可获得悬赏金
易百纳技术社区
在上传资料时,有价值的资料可设置为付费资源
易百纳技术社区
达到一定金额,收益即可提现~
收益也可用来充值ebc,下载资料、兑换礼品更容易
易百纳技术社区
活动规则
  • 1.周任务为周期性任务,每周周一00:00刷新,上周完成的任务不会累计到本周,本周需要从头开始任务,当前任务完成后才可以完成下一个任务
  • 2.发布的专栏与资料需要与平台的板块有相关性,禁止注水,专栏/资料任务以审核通过的篇数为准
  • 3.任务完成后,现金奖励直接打款到微信账户;EBC/收益将自动发放到个人账户,可前往“我的钱包”查看;其他奖励请联系客服兑换
  • 4.每周最后三个任务将会有以下奖品掉落:社区热卖开发板、小米音响、视频年度会员、京东卡、华为手机等等
易百纳技术社区
升级提醒
易百纳技术社区

恭喜您由入门

社区送出礼品一份

请填写您的收件地址,礼品将在3个工作日寄出

易百纳技术社区