关于前端: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);  }}

成果如下所示:

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

成果如下所示:

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

成果如下所示:

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

成果如下所示:

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

成果如下所示:

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

成果如下所示:

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

成果如下所示:

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

成果如下所示:

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

成果如下所示:

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

成果如下所示:

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