1. 滚动条样式
    ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12);
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgb(0 21 41 / 5%);
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .06);
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgb(0 21 41 / 5%);
}

// 去除滚动条
::-webkit-scrollbar {
      display: none;
      scrollbar-width: none;
      -ms-overflow-style: none;
}
  1. 灰色页面风格
    html{
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
}
  1. 单行文本溢出显示省略号
    overflow: hidden; // 溢出隐藏
white-space: nowrap; // 文本单行显示不能换行
text-overflow: ellipsis; // 溢出部分用省略号代替
  1. 多行文本溢出显示省略号
    word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 需要展示的最多行数 超出则用省略号代替
overflow: hidden;
  1. 盒子阴影
    box-shadow: h-shadow v-shadow blur spread color inset;

// 属性值：

// h-shadow：是指 阴影水平偏移量 ,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边

// v-shadow：是指 阴影的垂直偏移量 ，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部

// blur：阴影模糊半径；此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊

// spread：阴影扩展半径；此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小

// color：阴影颜色；此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数

// inset：设置从外层的阴影（开始时）改变阴影内侧阴影；可选值，可省略。
  1. 加载中...
    // html
<div class="loading">加载中<dot>...</dot></div>

// css
body {
  margin: 0;
}
.loading {
  height:100vh;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg,#c7e1fa 10%,#1381f0 90%);
  color: #fff;
  font-size: 4em;
  letter-spacing: 2px;
}
.loading > dot {
  height: 1em;
  overflow: hidden;
  display: inline-block;
  text-align: left;
  vertical-align: -0.25em;
  line-height: 1;
}
/* 核心代码 */
.loading > dot:before {
  display: block;
  /* 这行代码最重要 */
  content: '...\A..\A.';
  /* 值是Pre也是一样的效果 */
  white-space: pre-wrap;
  animation: dot 1.5s infinite step-start both;
}
@keyframes dot {
  33% {
    transform: translateY(-2em);
  }
  66% {
    transform: translateY(-1em);
  }
}
  1. ...弹跳加载
    // html
<div class="bouncing-loader">
  <div class="bouncing-loader-item"></div>
  <div class="bouncing-loader-item"></div>
  <div class="bouncing-loader-item"></div>
</div>

// css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.bouncing-loader {
  display: flex;
  justify-content: center;
  width: 150px;
}
.bouncing-loader-item {
  width: 16px;
  height: 16px;
  margin: 3rem 0.2rem;
  background-color: #0b16f1;
  border-radius: 50%;
  animation: bouncingLoader 0.6s infinite alternate;
}
.bouncing-loader-item:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader-item:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes bouncingLoader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -16px, 0);
  }
}
  1. 三角形
    // html
<div class="container"></div>

// css
// border实现
.container {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

// 线性渐变实现
.container {
        width: 160px;
          height: 200px;
          outline: 2px solid skyblue;
          background-repeat: no-repeat;
        background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
        background-size: 100% 50%;
        background-position: top left, bottom left;
}

// clip-path剪裁
.container{
        margin: 100px;
        width: 160px;
          height: 200px;
          background-color: skyblue;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
  1. 打字动画
    // html
<div class="typewriter-effect">
  <div class="text" id="typewriter-text"></div>
</div>

// css
.typewriter-effect {
  display: flex;
  justify-content: center;
  font-family: monospace;
  font-size: 25px;
  color: #535455;
  font-weight: 500;
}
.text {
  max-width: 0;
  animation: typing 3s steps(var(--characters--)) infinite;
  white-space: nowrap;
  overflow: hidden;
}
.typewriter-effect::after {
  content: ' |';
  animation: blink 1s infinite;
  animation-timing-function: step-end;
}
@keyframes typing {
  75%,
  100% {
    max-width: calc(var(--characters--) * 1ch);
  }
}
@keyframes blink {
  0%,
  75%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}


// js
const typeWriter = document.getElementById('typewriter-text');
const createWriter = (text = '欢迎光临') => {
  typeWriter.innerHTML = text;
  typeWriter.style.setProperty('--characters--', text.length);
};
createWriter();
最后修改：2023 年 11 月 13 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏