CSS效果实现 | 任先生的笔记库

# 一、元素动态化

# 1、变换（transform）

常见的，我们可以使用 translate 移动元素（比如：调整图片位置）：

translate 和 absolute 的区别

translate 是相对于元素自身的位置进行移动，而 absolute 是相对于父元素的位置进行移动。

div {
  /* 方式1: */
  position: absolute;
  top: -60px;

  /* 方式2: */
  transform: translateY(-60px);
}

/* 一、默认补零 */

/* 45deg */
transform: translate(…px); /* 这里的值不用加引号*/

/* 轴方向 */
transform: translateX(…px);
transform: translateY(…px);

/* 二、使用坐标 */
transform: translate(-50%, -50%);

其他变换函数

更多可以查看：transform (opens new window)

缩放

/* 45deg */
transform: scale(n); /* n表示放大的倍数 */

/* 轴方向 */
transform: scaleX(n);
transform: scaleY(n);

旋转

/* 绕原点 */
transform: rotate(…deg);

/* 绕轴 */
transform: rotateX(…deg);
transform: rotateY(…deg);

除此之外，transform 属性是可以传入多个值的：

transform: translateY(-10px) rotate(-10deg) scale(1.2);

# 2、过渡（transition）

transition 可以实现状态切换（显示隐藏），通常应用不同的伪元素之间切换（比如：:hover等）

使用解读

https://codepen.io/lencamo/pen/JjarywK

/* 指定属性 持续时间 速度曲线 开始时间 */
transition: all 1s ease 1s;

动态改变属性值

通过触发伪类来执行动画

.nav-item {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-item:hover {
  /* 动画 */
  background-color: #ff0000;
  color: #ffffff;
}

动态展示其他元素

通过动态的添加 .show、显示.content 来执行动画

.modal {
  display: none;

  transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal.show {
  display: block;
  /* 动画 */
  opacity: 1;
  transform: translateY(-24px);
}

.content {
  display: none;

  transition: opacity 0.3s ease, transform 0.3s ease;
}

.title:hover + .content {
  display: block;
  /* 动画 */
  opacity: 1;
  transform: translateY(-24px);
}

# ① 过渡属性

支持过渡的 css 属性：

分类	属性
颜色相关	color、background-color、border-color、opacity 等
尺寸相关	width、height、margin、padding 等
边框相关	border-width、border-radius、box-shadow 等
位置相关	top、right、bottom、left 等

# ② 时间函数

时间函数主要是用来控制过渡效果的速度曲线：

贝塞尔曲线 (opens new window)

属性值	说明	使用
ease	相当于 cubic-bezier(0.25,0.1,0.25,1)	慢速开始，然后变快

# 3、动画（animation）

在 animation 中，除了可以使用 cubic-bezier 还可以使用 step-start

属性值	说明	使用
ease	相当于 cubic-bezier(0.25,0.1,0.25,1)	慢速开始，然后变快
step-start	相当于 steps(1, start)

使用解读

https://codepen.io/lencamo/pen/JjarpqL

/* 指定属性 持续时间 速度曲线 开始时间 */
animation: 动画名 0s ease;

定义

@keyframes 动画名 {
  /* 方式一 */
  /* 0% {样式属性：属性值;}
    ……
    100% {样式属性：属性值;} */

  /* 方式二 */
  /* from {
    background-color: red;
  }
  to {
    background-color: yellow;
  } */
}

使用

div {
  animation: 动画名 1s ease-in-out infinite;

  /* animation: 动画名 1s steps(1, start) infinite; */
}

拓展

可以尝试自己实现以下三十种网页导航动画效果 (opens new window)

# 4、伪类

:hover：用户将光标（鼠标指针）悬停在元素上时触发，相关伪类还有（:link、:visited 或 :active）

使用示例

<div class="box" style="font-size:16px;">字体变换</div>

<style>
  .box:hover {
    font-size: 22px;
  }
</style>

js 实现

<div class="box" style="font-size:16px;">字体变换</div>

<script>
  var elm = document.querySelector('.box')
  // console.log(elm)

  elm.onmouseenter = function () {
    elm.style.fontSize = '22px'
  }

  elm.onmouseleave = function () {
    elm.style.fontSize = '16px'
  }
</script>

:checked：任何处于选中状态的 checkbox 和 radio 元素或 select 选择框等处于选中状态时触发

使用示例

<input type="checkbox" id="sing" class="menu-btn" />
<label class="text" for="sing">唱跳</label>

<style>
  input[type='checkbox']:checked.menu-btn + .text {
    background-color: green;
  }
</style>

js 实现

<input type="checkbox" id="sing" class="menu-btn" />
<label class="text" for="sing">唱跳</label>

<style>
  .checked {
    background-color: green;
  }
</style>

<script>
  let elm = document.querySelector('input[type="checkbox"].menu-btn')
  // console.log(elm)

  elm.onchange = function (e) {
    // console.log(this === e.target)

    if (this.checked) {
      this.nextElementSibling.classList.add('checked')
    } else {
      this.nextElementSibling.classList.remove('checked')
    }
  }
</script>

# 二、 css 效果应用

# 1、三角形图标

演示地址 (opens new window)

.triangle-one {
  width: 0px;
  height: 0px;

  border: 50px solid transparent;
  /*   border-right-color: skyblue; */
  border-color: orangered skyblue gold yellowgreen; /* 完整效果 */
}

/* =================== */

/* 推荐😂 */
.triangle-two {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-top: 35px solid skyblue; /*   调整高低胖瘦 */
  border-right: 50px solid transparent; /*   猜猜去掉有什么效果？ */
}

经典应用：🤔 消息框

具体使用可以采用：伪类 + 定位 或者 小三角盒子 + 定位（✔）

在线演示：消息框 (opens new window)

# 2、shadow 阴影

# ① 盒子阴影

盒子阴影box-shadow (opens new window)比较常见，通常使用如下：

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);

如果我们需要在线示例，可以使用在线网站Box-shadov.dev (opens new window)；如果我们需要多层阴影，可以借助在线工具neumorphism (opens new window)进行调试。

# ② 文字阴影

文字阴影的使用可以让文本元素看起来更加突出和有立体感

/* 略 */

# 3、gradient 渐变

关于渐变，个人感觉没有必要深研，使用的时候使用在线工具grabient (opens new window)即可。

线性渐变

/* 默认（从上到下） */
background-image: linear-gradient(#ff577f, #c6c9ff);

/* 等效于 */
background-image: linear-gradient(180deg, #0093e9 0%, #80d0c7 100%);

径向渐变

/*椭圆形渐变*/
background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);

/*圆形渐变*/
background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);

# 三、其他

# 1、white-space

常见的换行符有：<br>、\n、\r\n、\r等，空格有：&emsp;、 等

	文字换行	空格	换行符
normal（默认值）	换行	合并成一个	不支持
nowrap✨	不换行（仅单行，会超出）	合并成一个	不支持
pre	换行（行为单位，会超出）	保留全部空格	支持
pre-wrap🚩	换行	保留全部空格	支持
pre-line	换行	合并成一个	支持

长文本空格保留问题

演示地址 (opens new window)

div.msg {
  white-space: pre-wrap;
}

内容省略应用

演示地址 (opens new window)

/* 单行文本溢出 */
.box {
  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

/* 多行文本溢出 */
.box {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;
  text-overflow: ellipsis;
}

# 2、filter-function

- grayscale() (opens new window) : 对图片进行灰度转换，它是 <filter-function> 的子属性

- blur() (opens new window)：将高斯模糊应用于输出图片

参考地址 (opens new window)

/* 黑白悼念主题 */
html {
  filter: grayscale(1);
}

/* 模糊处理 */
img {
  filter: blur(4px);
}

# 3、滚动条样式

关于滚动条的样式修改，这是一个细节性问题，通过修改滚动条可以让网站提升一个档次。

以 element ui 官网为例：网页一 (opens new window) 和网页二 (opens new window) 就有明显的区别。常见应用如：各大网站看视频时的选集滚动条。

::-webkit-scrollbar——整个滚动条。
::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
::-webkit-scrollbar-track——滚动条轨道。
::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

# 4、iframe 使用

<iframe src="https://note-taking.cn/"></iframe>

iframe {
  border: none;
  outline: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

← CSS 基础前端布局设计 →