CSS常用特效

1、鼠标悬停

悬停效果是指当用户将鼠标悬停在元素上时，元素会发生变化。这种效果可以使用CSS的:hover伪类来实现。

<button>鼠标悬停</button>
<style>
button {
  background-color: #2f87c9;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: #4f4f4f;
}
</style>

在这个例子中，当用户将鼠标悬停在button元素上时，背景颜色将从#2f87c9变成#4f4f4f。

2、过渡效果

过渡效果是指当元素的属性发生变化时，可以使用CSS的transition属性来创建平滑的过渡效果。

<div class="box">过渡效果</button>
<style>
.box {
  background-color: #2f87c9;
  width: 100px;
  height: 100px;
  transition: width 1s ease;
}

.box:hover {
  width: 200px;
}
</style>

在这个例子中，当用户将鼠标悬停在.box元素上时，它的宽度将从100px过渡到200px，过渡时间为1秒。

Tips：

transiton: transition-property（过渡属性） transition-duration（过渡所需要时间） transition-delay（过渡延迟时间）transition-timing-function（过渡动画函数）；

• transition-property：不是所有属性都能过渡，只有属性具有一个中间点值才具备过渡效果。
  • none：没有属性会获得过渡效果。
  • all：所有属性都将获得过渡效果。
  • property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
• transition-duration：指定从一个属性到另一个属性过渡所要花费的时间。默认值为0，为0时，表示变化是瞬时的，看不到过渡效果。
• transiton-timing-function：
  • liner：匀速
  • ease-in：减速
  • ease-out：加速
  • ease-in-out：先加速再减速
  • cubic-bezier：三次贝塞尔曲线

3、背景渐变效果

渐变效果是指在元素的背景中使用CSS渐变来创建视觉效果。CSS渐变有四种类型：线性渐变、径向渐变、重复线性渐变和重复渐变。本文着重前两种渐变，如需了解详情请看，W3school中相关文档：直达链接

• 线性渐变，默认从上到下

/* 方向 */
.linear1 {
  background: linear-gradient(to right, #2f87c9, #1a1a1a);
  width: 300px;
  height: 200px;
}
/* 角度 */
.linear2 {
  background: linear-gradient(45deg, #2f87c9, #1a1a1a);
  width: 300px;
  height: 200px;
}

• 径向渐变：background-image: radial-gradient(shape size at position, start-color, ..., last-color);，默认地，shape 为椭圆形（ellipse，可选值圆型circle），size 为最远角，position 为中心。

.radial {
  background: radial-gradient(circle, #2f87c9, #1a1a1a);
  width: 300px;
  height: 200px;
}

4、动画效果

动画效果是指通过使用CSS的@keyframes规则和animation属性来创建元素动画。

.radial {
  background: radial-gradient(circle, #2f87c9, #1a1a1a);
  width: 300px;
  height: 200px;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #2f87c9;
  animation: rotate 2s linear infinite;
}

在这个例子中，.box元素将无限旋转，每次旋转需要2秒，并以线性速度进行旋转。

5、超出省略号

要在单行和多行文本中使用CSS实现超出省略号，需要根据文本的特点进行不同的设置。

• 单行省略：对于单行文本，只需要将text-overflow属性设置为ellipsis即可。

<div class="example">
  这是一个超长的单行文本，需要用省略号来截断。
</div>
<style>
  .example {
    width: 200px; /* 设置元素宽度 */
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏超出部分的文本 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
</style>

• 多行省略：可以使用-webkit-line-clamp和display: -webkit-box;属性来实现省略号。这个方法仅在WebKit浏览器（如Chrome和Safari）中可用。

<div class="example">
  <p>
    这是一个超长的多行文本，需要用省略号来截断。这是一个超长的多行文本，需要用省略号来截断。这是一个超长的多行文本，需要用省略号来截断。
  </p>
</div>
<style>
  .example {
    display: -webkit-box; /* 显示为弹性盒子 */
    -webkit-line-clamp: 2; /* 设置行数 */
    -webkit-box-orient: vertical; /* 设置弹性盒子方向为垂直方向 */
    overflow: hidden; /* 隐藏超出部分的文本 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
</style>

在上面的代码中，我们将display属性设置为-webkit-box，并将-webkit-line-clamp属性设置为要显示的最大行数。我们还将-webkit-box-orient属性设置为vertical，以使文本在垂直方向上溢出。最后，我们将overflow属性设置为hidden，以隐藏超出部分的文本，将text-overflow属性设置为ellipsis，以在文本的结尾处显示省略号。

需要注意的是，-webkit-line-clamp只在WebKit浏览器中可用，如果需要兼容其他浏览器，可以使用JavaScript来实现。

5、圆形

可以通过圆角属性，border-radius来实现

6、三角形

在CSS中，可以通过伪元素（:before和:after）以及CSS3的transform属性和border属性来画出三角形。下面是关于常用的border画三角形的方法。

  <div class="example"></div>

.example {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

6、边框阴影

Box-shadow是CSS3中一个非常有用的属性，它可以为一个元素添加一个或多个阴影效果，使得页面的视觉效果更加生动。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

其中，h-shadow和v-shadow指定了阴影的水平和垂直偏移量，blur指定了阴影的模糊半径，spread指定了阴影的扩展半径，color指定了阴影的颜色，inset可选，用于指定阴影是否在元素内部。

<!-- 单个阴影 -->
<div class="box1"></div>
<style>
  .box1 {
    width: 200px,
    height: 200px,
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
</style>
<!-- 多个阴影 -->
<div class="box2"></div>
<style>
  .box2 {
    width: 200px,
    height: 200px,
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
              -2px -2px 4px rgba(255, 255, 255, 0.3);
  }
</style>
<!-- 内阴影 -->
<div class="box3"></div>
<style>
  .box3 {
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
</style>