讲解 CSS 过渡和动画 transition/animation (很全面 )

讲解CSS过渡和动画 transition/animation：全方位深入实践指南

**引言：赋予网页动态生命力**

CSS过渡（Transition）与动画（Animation）是现代Web前端开发中不可或缺的设计元素，它们使静态网页变得生动活泼，极大地提升了用户体验。本文旨在以全面且易于理解的方式讲解CSS过渡与动画的工作原理、应用场景及其具体实现方法，辅以实例代码，帮助您更好地理解和掌握这一关键技术。

---

### **一、CSS过渡基础概念**

**标题：走进CSS Transition的世界**

**1. 过渡是什么？**

CSS过渡是一种视觉效果，它能够在CSS属性值发生变化时平滑地过渡。例如，当鼠标悬停在一个元素上时，其背景颜色可以从白色逐渐过渡到黑色。

**2. 如何定义过渡？**

过渡由三个关键部分组成：**触发器**（何时启动过渡）、**持续时间**（过渡多久完成）以及**执行方式**（如何变化）。

```css

/* 基础过渡设置 */

.example {

transition: property duration timing-function delay;

}

/* 示例 */

.box {

width: 100px;

height: 100px;

background-color: red;

transition: background-color 0.5s ease-in-out;

}

```

在此示例中，`.box`元素的背景色会在属性值改变时，在0.5秒内平滑过渡。

---

### **二、过渡触发方式**

**标题：触发动画的关键时刻**

过渡通常在CSS属性值发生改变时自动触发，常见的触发方式有：

- **伪类触发**（`:hover`, `:focus`, `:active`等）

- **JavaScript操作触发**（通过更改DOM元素样式）

```html

<!DOCTYPE html>

<head>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

transition: background-color 0.5s ease-in-out;

}

.box:hover {

background-color: blue;

}

</style>

</head>

<body>

</body>

</html>

```

在这个例子中，当鼠标悬停在`.box`元素上时，背景颜色会通过过渡效果变蓝。

---

### **三、CSS动画进阶详解**

**标题：构建复杂的动画效果**

CSS动画比过渡更为灵活，允许开发者定义一系列关键帧（@keyframes），并在指定时间段内逐步变换样式。

**1. 创建关键帧规则**

```css

@keyframes fadeInOut {

0% { opacity: 0; }

50% { opacity: 1; }

100% { opacity: 0; }

}

```

上述代码定义了一个名为`fadeInOut`的动画，元素将在动画期间经历透明度从0到1再到0的变化。

**2. 应用动画**

```css

.box {

animation-name: fadeInOut;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

```

通过`animation-*`系列属性，我们将`fadeInOut`动画应用于`.box`元素，使其无限循环交替播放，每次持续2秒。

---

### **四、动画高级特性**

**标题：探索动画的更多可能性**

- **动画填充模式**（animation-fill-mode）控制动画结束后元素的样式状态。

- **动画延时**（animation-delay）决定动画何时开始。

- **动画播放次数**（animation-iteration-count）可设置动画循环次数，甚至使用`infinite`无限循环。

- **动画方向**（animation-direction）影响动画是否逆序播放。

---

### **五、综合案例分析**

**标题：实际项目中的CSS过渡与动画运用**

此处可以结合实际项目需求，给出一个或多个包含复杂过渡和动画交互的HTML+CSS示例，比如响应式导航菜单的展开收起动画、轮播图切换过渡效果等，以增强文章的实用性。

---

**结语：**

熟练掌握CSS过渡和动画，能让您的网页设计更具表现力和吸引力。无论是微小的UI细节还是复杂的交互场景，善用过渡和动画都能有效提升用户体验。记住，适时适度的动态效果才是锦上添花，过度则可能适得其反。希望通过这篇文章，您能够洞悉CSS过渡与动画的奥秘，并在实践中游刃有余地运用这些强大的工具。

您2019猪事顺利，心想事成。

前言

前面两篇文章都有提到过box-shadow，里面也有很多的基础知识，有看过的小伙伴应该都有或多或少的收获吧，今天我们再从基础入手，希望能让大家更熟悉它。

没有看过之前文章的小伙伴请点击：

CSS3 box-shadow实现背景动画

CSS3动画解析抖音 LOGO制作

下面我们从最基础的开始演示。

单侧投影

关键点: 1、外 box-shadow 前四个参数：x 偏移值、y 偏移值、模糊半径、扩张半径。 2、单侧投影的核心是第四个参数：扩张半径。这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属的元素尺寸完全一致，除非使用偏移量来移动他，否则我们将看不到任何投影。

<style>
.left {
 box-shadow: -8px 0 5px -5px #333;
}

.right {
 box-shadow: 8px 0 5px -5px #333;
}

.top {
 box-shadow: 0 -8px 5px -5px #333;
}

.bottom {
 box-shadow: 0 8px 5px -5px #333;
}
</style>
<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>

立体文字阴影

知识点：

1、立体文字阴影的关键点在于多层 text-shadow 的叠加

2、合理运用了 SASS 函数来自动计算多层 text-shadow 的 CSS 代码

3、运用了 Sass 的颜色函数，渐进实现层级阴影颜色 - fade-out: 改变颜色的透明度，让颜色更加透明 - desaturate: 改变颜色的饱和度值，让颜色更少的饱和

4、HSL(颜色值)

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%

<style>
@function blessing($color) {
 $val: 0px 0px $color;
 @for $i from 1 through 50 {
 $color: fade-out(desaturate($color, 1%), .02);
 $val: #{$val}, -#{$i}px #{$i}px #{$color};
 }
 @return $val;
}

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: blessing(hsl(0, 100%, 50%));
 color: hsl(14, 100%, 60%);
}
</style>
<div>福</div>

编译后的css(推荐scss在线编译为css工具) https://www.sassmeister.com/

...
div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: 0px 0px #992400, 
 1px 1px rgba(152, 36, 1, 0.98), 
 2px 2px rgba(151, 37, 2, 0.96), 
 3px 3px rgba(151, 37, 2, 0.94), 
 ...
 ...
 ... 
 49px 49px rgba(116, 56, 37, 0.02), 
 50px 50px rgba(115, 56, 38, 0);
 color: #ff6333;
}

从浅到深的学习 CSS3阴影(box-shadow)

线性渐变模拟长阴影

知识点

1、借用了元素的两个伪元素

2、通过渐变色填充两个伪元素，再通过位移、变换放置在合适的位置

<style>
div {
 position: relative;
 width: 30vmin;
 height: 30vmin;
 line-height: 30vh;
 text-align: center;
 font-size: 30px;
 background: #fff;
 margin: 30vmin auto;
}

div::before,
div::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

div::before {
 content: ':before';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 50%;
 transform: translate(100%, 0) skewY(45deg) scaleX(.6);
 background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}

div::after {
 content: ':after';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 0;
 transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
 background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
</style>
<div>Web秀</div>

从浅到深的学习 CSS3阴影(box-shadow)

渐变实现内切角

知识点

1、阴影实现的关键点在于使用伪元素绝对定位在容器的一角，元素本身透明，阴影扩散开形成内切圆角效果

2、阴影实现缺点，单个标签最多只能是2个内切圆角

3、径向渐变实现内切圆角可以是4边

<style>
div {
 position: relative;
 width: 20vw;
 height: 8vw;
 margin: 1vw auto;
 border-radius: 1vmin;
 overflow: hidden;
 line-height: 8vw;
 color: #fff;
 text-align: center;
}

.shadow::before {
 position: absolute;
 content: "";
 top: -2vw;
 left: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.shadow::after {
 position: absolute;
 content: "";
 bottom: -2vw;
 right: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.linear {
 background-size: 70% 70%;
 background-image: 
 radial-gradient(
 circle at 100% 100%, 
 transparent 1vw, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 100% 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 100%, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw);
 background-repeat: no-repeat;
 background-position: 
 right bottom, 
 left top, 
 right top, 
 left bottom;
}
</style>
<div class="shadow">阴影实现缺点最多是2边</div>
<div class="linear">径向渐变内切圆角4边</div>

从浅到深的学习 CSS3阴影(box-shadow)

圆环进度条动画

知识点 ：圆环进度条的移动本质上是阴影顺序延时移动的结果。

<style>
body {
 background: #000;
}

.container {
 position: relative;
 overflow: hidden;
 width: 124px;
 height: 124px;
 overflow: hidden;
 margin: 100px auto;
 border-radius: 50%;
}

.shadow {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 line-height: 120px;
 border-radius: 50%;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63;
 text-align: center;
}
.shadow:hover {
 animation: border 0.5s ease forwards;
}

@keyframes border {
 0% {
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px transparent;
 }
 25% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 50% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 75% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 100% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 120px 40px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
}
</style>
<div class="container">
 <div class="shadow">web 秀</div></div>
</div>

从浅到深的学习 CSS3阴影(box-shadow)

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”

、涉及的函数

隐藏：

初始化：class='hidden';

过程中：hide();fadeOut;

显示：show();fadeIn();

二、登录框界面设计

</div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</form>

</div>

<div id='background' class='hidden'></div>

三、打开登录弹出框

$( '.login' ).click( function () {

var obj = $( '#login' );

dialog( obj );

}

在线咨询

上一篇：卖家注意：商品描述页面将不能使用HTML标记
下一篇：python 模块BeautifulSoup 从HTML或XML文件中提取数据

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

讲解 CSS 过渡和动画 transition/animation (很全面 )

前言

单侧投影

立体文字阴影

线性渐变模拟长阴影

渐变实现内切角

圆环进度条动画

公告

、涉及的函数

二、登录框界面设计

三、打开登录弹出框

您的项目需求