关于前端:10-个-效果不错的值得收藏的-css-代码片段

10 个 css 代码片段

以下这 10 个罕用的 css 代码片段值得珍藏，都能够用于平时的业务代码当中。

1. 点点点加载中成果

这是一个兼容性不错的用户体验很棒的点点点加载成果，实现思路如下:

• 应用自定义的标签元素 dot。
• 将 dot 元素设置为内联元素 (display:inline-block), 并设置溢出暗藏 (overflow:hidden)，高度设置为 1em。
• 应用:before 伪元素联合 \AUnicode 字符插入内容，并且应用 white-space:pre-wrap 保留换行成果，应用 css 动画。
• 应用 transform 和 translate 为 … 增加动画成果。

html 代码如下:

<div class="loading"> 正在加载中 <dot>...</dot></div>

css 代码如下:

.loading {/** 这里写本人自定义的款式 */}
.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 3s infinite step-start both;
}
@keyframes dot {
  33% {transform: translateY(-2em);
  }
  66% {transform: translateY(-1em);
  }
}

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/dot-loading.html”></iframe>

2. 对话框

创立一个顶部带有三角形的内容容器对话框，实现思路如下:

• 应用 :before 和 :after 伪元素创立两个三角形。
• 两个三角形的色彩应别离与容器的边框色彩和容器的背景色彩雷同。
• 一个三角形的边框宽度 (:before) 应该比另一个三角形 (:after) 宽 1px，以便充当边框。
• 较小的三角形 (:after) 应位于较大三角形 (:before) 右侧 1px 处，以容许显示其左边框。

html 代码如下:

<div class="container">Border with top triangle</div>

css 代码如下:

.container {
  --borderColor--: #ddd;
  --bgColor--: #fff;
  position: relative;
  background-color: var(--bgColor--);
  padding: 15px;
  margin-top: 20px;
  border: 1px solid var(--borderColor--);
}
.container:before,
.container:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
  border-bottom-color: var(--borderColor--);
}
.container:after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: var(--bgColor--);
}

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/border-with-top-triangle.html”></iframe>

3. 弹跳加载成果

创立一个弹跳加载器动画, 实现思路如下:

• 应用 @keyframes 定义弹跳动画，应用 opacity 和 transform 属性。在 transform: translate3d() 上应用单轴平移来取得更好的动画性能。
• 为弹跳圆创立一个父容器 .bouncing-loader。应用 display: flex 和 justify-content: center 将它们定位在核心。
• 给三个弹跳的圆形 <div> 元素设置雷同的宽度和高度以及 border-radius: 50% 以使它们成为圆形。
• 将 bouncing-loader 动画利用于三个弹跳圆圈中的每一个。
• 为每个圆圈和动画方向应用不同的动画提早：交替以创立适当的成果。

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);
  }
}

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/bouncing-loader.html”></iframe>

4. 动画边框按钮

在悬停时创立边框动画，实现思路如下:

• 应用 :before 和 :after 伪元素创立两个 24px 宽的盒子，在盒子的上方和下方彼此绝对。
• 应用 :hover 伪类在悬停时将这些元素的宽度扩大到 100% 并应用过渡动画更改。

html 代码如下:

<button class="animated-border-button">Submit</button>

css 代码如下:

.animated-border-button {
  outline: none;
  background-color: #2396ef;
  padding: 12px 40px 10px;
  border: none;
  position: relative;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.animated-border-button::before,
.animated-border-button::after {
  content: '';
  position: absolute;
  border: 0 solid transparent;
  height: 0;
  width: 24px;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.animated-border-button::before {
  border-top: 2px solid #2396ef;
  top: -4px;
  right: 0;
}
.animated-border-button::after {
  border-bottom: 2px solid #2396ef;
  bottom: -4px;
  left: 0;
}
.animated-border-button:hover::before,
.animated-border-button:hover::after {width: 100%;}

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/button-border-animation.html”></iframe>

5. border 等高布局

应用 border 实现等高布局，实现思路如下:

• 给盒子元素设置一个左边框，边框宽度由子元素的宽度决定，这里是 150px。
• 给盒子元素的伪类设置革除浮动，这里不能应用 overflow:hidden 来革除。
• 给盒子元素的右边导航元素设置左浮动，并设置宽度和左负间距，间距值等于宽度值。
• 给盒子元素的左边内容元素设置 overflow:hidden。
• 导航子元素设置行高和左边子元素设置行高。

html 代码如下:

<section class="box">
  <nav class="box-nav">
    <div class="box-nav-item"> 导航 1 </div>
  </nav>
  <section class="box-content">
    <div class="box-content-module"> 模块 1 </div>
  </section>
</section>

css 代码如下:

.box {
  border-left: 150px solid #232425;
  background-color: #eeeded;
}

.box::after {
  content: '';
  clear: both;
  display: block;
}

.box-nav {
  width: 150px;
  margin-left: -150px;
  float: left;
}

.box-nav-item {
  line-height: 40px;
  color: #fff;
  text-align: center;
}

.box-content-module {
  line-height: 40px;
  text-align: center;
  color: #c40dd4;
}

.box-content {overflow: hidden;}

javascript 代码如下所示:

const navMore = document.getElementById('addNav'),
  moduleMore = document.getElementById('addContent');

if (navMore && moduleMore) {const nav = document.querySelector('.box-nav'),
    section = document.querySelector('.box-content');
  let navIndex = nav.children.length,
    sectionIndex = 1;
  let rand = () => 'f' + (Math.random() + '').slice(-1);
  navMore.onclick = function () {
    navIndex++;
    nav.insertAdjacentHTML(
      'beforeEnd',
      '<div class="box-nav-item"> 导航' + navIndex + '</div>'
    );
  };
  moduleMore.onclick = function () {
    sectionIndex++;
    section.insertAdjacentHTML(
      'beforeEnd',
      '<div class="box-content-module"style="background:#' +
        [rand(), rand(), rand()].join('') +'"> 模块 ' +
        sectionIndex +
        '</div>'
    );
  };
}

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/border-contour.html”></iframe>

6. 自定义复选框

创立带有状态更改动画的款式复选框, 实现思路如下:

• 应用 <svg> 元素创立查看 <symbol> 并通过 <use> 元素将其插入以创立可重用的 SVG 图标。
• 创立一个 .ew-checkbox-group 并应用 flex box 为复选框创立适当的布局。
• 暗藏 <input> 元素并应用与其关联的标签来显示复选框和提供的文本。
• 应用 stroke-dashoffset 在状态更改时为查看符号设置动画。
• 通过 CSS 动画应用 transform: scale(0.9) 创立缩放动画成果。

html 代码如下:

<div class="ew-checkbox-group">
  <label class="ew-checkbox">
    <svg class="ew-checkbox-symbol">
      <symbol id="ew-check" viewbox="0 0 12 10">
        <polyline
          points="1.5 6 4.5 9 10.5 1"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
        ></polyline>
      </symbol>
    </svg>
    <input type="checkbox" class="ew-checkbox-input" />
    <span class="ew-checkbox-item">
      <svg class="ew-checkbox-icon" width="12px" height="10px">
        <use xlink:href="#ew-check"></use>
      </svg>
    </span>
    <span class="ew-checkbox-item"> Apples </span>
  </label>
  <label class="ew-checkbox">
    <input type="checkbox" class="ew-checkbox-input" />
    <span class="ew-checkbox-item">
      <svg class="ew-checkbox-icon" width="12px" height="10px">
        <use xlink:href="#ew-check"></use>
      </svg>
    </span>
    <span class="ew-checkbox-item"> Oranges </span>
  </label>
</div>

css 代码如下:

.ew-checkbox-group {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.85);
  height: 64px;
  display: flex;
  flex-wrap: row wrap;
  justify-content: center;
  align-items: center;
}
.ew-checkbox-group .ew-checkbox-symbol {
  width: 0;
  height: 0;
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.ew-checkbox-group * {box-sizing: border-box;}
.ew-checkbox-input {
  position: absolute;
  visibility: hidden;
}
.ew-checkbox {
  user-select: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  display: flex;
}
.ew-checkbox:not(:last-of-type) {margin-right: 6px;}
.ew-checkbox:hover {background-color: rgba(0, 120, 255, 0.06);
}
.ew-checkbox .ew-checkbox-item {
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.ew-checkbox .ew-checkbox-item:first-of-type {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: scale(1);
  border: 1px solid #cdcdfd;
  transition: all 0.4s ease;
}
.ew-checkbox .ew-checkbox-icon {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.4s ease;
  transform: translate3d(0, 0, 0);
}
.ew-checkbox .ew-checkbox-item:last-of-type {
  padding-left: 8px;
  line-height: 18px;
}
.ew-checkbox:hover .ew-checkbox-item:first-of-type {border-color: #2396ef;}
.ew-checkbox-input:checked + .ew-checkbox-item:first-of-type {
  animation: zoom-in-out 0.3s ease;
  background-color: #2396ef;
  border-color: #2396ef;
}
.ew-checkbox-input:checked + .ew-checkbox-item .ew-checkbox-icon {stroke-dashoffset: 0;}
@keyframes zoom-in-out {
  50% {transform: scale(0.9);
  }
}

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/custom-checkbox.html”></iframe>

7. 自定义单选框

创立一个带有状态更改动画的款式单选按钮, 实现思路如下:

• 创立一个 .radio-container 并应用 flex box 为单选按钮创立适当的布局。
• 重置 <input> 上的款式并应用它来创立单选按钮的轮廓和背景。
• 应用 ::before 元素创立单选按钮的内圈。
• 应用 transform: scale(1) 和 CSS transition 在状态变动时创立动画成果。

html 代码如下:

<div class="radio-container">
  <input type="radio" class="radio-input" id="male" name="sex" />
  <label for="male" class="radio"> 男 </label>
  <input type="radio" class="radio-input" id="female" name="sex" />
  <label for="female" class="radio"> 女 </label>
</div>

css 代码如下:

.radio-container {
  box-sizing: border-box;
  background-color: #fff;
  color: #545355;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}
.radio-container * {box-sizing: border-box;}
.radio-input {
  appearance: none;
  background-color: #fff;
  width: 16px;
  height: 16px;
  border: 1px solid #cccfdb;
  margin: 0;
  border-radius: 50%;
  display: grid;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in;
}
.radio-input::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.3s transform ease-in-out;
  box-shadow: inset 6px 6px #fff;
}
.radio-input:checked {
  background-color: #2396ef;
  border-color: #2396ef;
}
.radio-input:checked::before {transform: scale(1);
}
.radio {
  cursor: pointer;
  padding: 6px 8px;
}
.radio:not(:last-child) {margin-right: 6px;}

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/custom-radio.html”></iframe>

8. 打字成果

创立打字机成果动画, 实现思路如下:

• 定义两个动画，键入动画字符和闪动动画插入符号。
• 应用 ::after 伪元素将插入符号增加到容器元素。
• 应用 JavaScript 设置外部元素的文本并设置蕴含字符数的 –characters 变量。此变量用于为文本设置动画。
• 应用 white-space: nowrap 和 overflow: hidden 使内容在必要时不可见。

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;}
}

javascript 代码如下:

const typeWriter = document.getElementById('typewriter-text');
const createWriter = (text = 'Lorem ipsum dolor sit amet.') => {
  typeWriter.innerHTML = text;
  typeWriter.style.setProperty('--characters--', text.length);
};
createWriter();

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/typewriter-effect.html”></iframe>

9. 高度过渡成果

当元素的高度未知时，将元素的高度从 0 转换为 auto, 实现思路如下:

• 应用 transition 来指定对 max-height 的更改应该被过渡。
• 应用 overflow:hidden 来避免暗藏元素的内容溢出其容器。
• 应用 max-height 指定初始高度为 0。
• 应用 :hover 伪类将 max-height 更改为 JavaScript 设置的 –max-height 变量的值。
• 应用 Element.scrollHeight 和 CSSStyleDeclaration.setProperty() 将 –max-height 的值设置为元素的以后高度。
• 留神：在每个动画帧上导致重排，如果在高度过渡的元素下方有大量元素，则会呈现提早。

html 代码如下:

<div class="trigger">
  Hover me to see a height transition.
  <div class="el">Additional content</div>
</div>

css 代码如下:

.trigger {
  cursor: pointer;
  border-bottom: 1px solid #2396ef;
}
.el {
  transition: max-height 0.4s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {max-height: var(--max-height--);
}

javascript 代码如下:

const el = document.querySelector('.el'),
  height = el.scrollHeight;
el.style.setProperty('--max-height--', height + 'px');

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/height-transition.html”></iframe>

10. 开关切换

仅应用 CSS 创立一个切换开关小组件, 实现思路如下:

• 应用 for 属性将 <label> 与复选框 <input> 元素相关联。
• 应用 <label> 的 ::after 伪元素为开关创立一个圆形旋钮。
• 应用 :checked 伪类选择器更改旋钮的地位，应用 transform: translateX(20px) 和开关的背景色彩。
• 应用 position: absolute 和 left: -9999px 在视觉上暗藏 <input> 元素。

html 代码如下:

<input type="checkbox" id="toggle" class="offscreen checkbox" />
<label for="toggle" class="switch"></label>

css 代码如下:

.offscreen {
  position: absolute;
  left: -9999px;
}
.checkbox:checked + .switch::after {transform: translateX(20px);
}
.checkbox:checked + .switch {background-color: #7983ff;}
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
  cursor: pointer;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: #fff;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

成果如下所示:

<iframe src=”https://eveningwater.github.io/code-segment/codes/css/html/toggle-switch.html”></iframe>

ps: 以上代码段来自各大网络上收集的，目前总结在自己的代码段网站代码段上。