网页基础开发教程 10

项目9实现网页中的动画效果CSS3高级特性掌握过渡的多种属性，能够为网页中的元素添加过渡效果;掌握变形的多种属性，能够制作2D变形效果和3D变形效果;掌握动画的多种属性，能够为网页中的元素添加动画效果。任务描述知识准备任务实现任务小结任务测试与考核实训制作客户案例页面。包括企业实现智能办公升级和赋能服务模块。1.HTML结构（1）创建“企业实现智能办公升级”展示区结构。（2）创建“赋能服务”展示区结构。2.CSS样式（1）整体页面的版心宽度设置1200px，并居中显示；（2）“企业实现智能办公升级”部分背景颜色为浅灰色（#eaeef6）；（3）每个内容盒子的大小为宽度386px，高度390px，背景颜色为白色，左外边距20px，下外边距20px；（4）设置鼠标经过时标题颜色变蓝加粗，盒子产生阴影效果并向左上移动2px；（5）“赋能服务”部分背景颜色为白色（#fefeff），鼠标经过图片产生放大动画效果。任务描述任务描述知识准备任务实现任务小结任务测试与考核实训过渡属性变形属性动画属性知识准备1：过渡属性过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用

Flash

动画或JavaScript

的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。CSS过渡能够为CSS属性的变化赋予平滑的动画效果，而非生硬的瞬间切换。这一动画由四个属性协同控制：transition-property（定义过渡属性）、transition-duration（设置持续时间）、transition-timing-function（控制变化节奏）以及transition-delay（设置开始延迟）。我们现在经常和:hover一起搭配使用。知识准备1：过渡属性1.transition-property属性transition-property属性指定哪些CSS属性需要应用过渡效果。只有在这里列出的属性，在值变化时才会产生动画。其基本语法格式如下：在上述语法格式中，transition-property的属性值具体说明如表所示：transition-property:none|all|property;属性名称说明none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的

CSS属性名称列表，列表以逗号分隔。知识准备1：过渡属性2.transition-duration属性transition-duration定义过渡效果持续的时间，即动画从开始到结束需要花费多久。其基本语法格式如下：在上述语法格式中，transition-duration属性的值以秒（s）或毫秒（ms）为单位（例如0.5s或500ms）。默认值为0，表示无动画。transition-duration:time;知识准备1：过渡属性3.transition-timing-function属性transition-timing-function属性定义过渡效果的速度曲线，控制动画在持续时间内的变化速率（如先快后慢、匀速等）。其基本语法格式如下：transition-timing-function属性用于定义过渡动画的速度曲线，其默认值为ease（慢速开始，加速，再慢速结束）。除默认值外，还可选用以下常用速度曲线：

linear：匀速变化

ease-in：慢速开始

ease-out：慢速结束

ease-in-out：慢速开始和结束

cubic-bezier：通过贝塞尔曲线自定义速度模式（基础场景建议优先使用前述预设值）transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);知识准备1：过渡属性4.transition-delay属性transition-delay属性用于指定过渡效果延迟开始的时间。其基本语法格式如下：上述语法格式中，time：指定延迟时间，常用单位为秒(s)或毫秒(ms)，默认值为0，表示不延迟。transition-delay:

time;CSS过渡动画四个属性案例例9-1启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-1.html。部分代码如下：知识准备1：过渡属性鼠标悬停时，div经过2秒延迟后，背景色和宽度同时开始过渡变化：背景色从天空蓝渐变为绿色，宽度从300px扩展到500px，整个过程持续3秒，呈现慢进慢出的缓动效果。div:hover{width:500px;background-color:green;transition-property:background-colorwidth;/*指定产生动画过渡效果的CSS属性*/transition-duration:3s;/*指定动画过渡效果的时间*/transition-timing-function:ease-in-out;/*指定以慢速开始和结束的过渡效果*/transition-delay:2s;/*指定动画过渡动作延迟触发*/}div{width:300px;height:50px;background-color:skyblue;color:brown;font-weight:bold;}<body><div>会挽雕弓如满月，西北望，射天狼。</div></body>

知识准备1：过渡属性5.transition属性transition属性通过一个声明，即可定义元素样式变化时的平滑过渡效果。它集成了四个关键值：过渡属性(property)、持续时间(duration)、速度曲线(timing-function)和延迟时间(delay)。其基本语法格式如下：在使用transition属性时，它的各个参数必须按照顺序进行定义，不能颠倒。

property：指定哪些CSS属性会触发过渡或动画。

duration：定义效果持续的时间。

timing-function：定义效果的速度曲线。delay：定义效果开始前的延迟时间。transition:

propertydurationtiming-functiondelay;transition属性的用法案例例9-2启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-2.html。部分代码如下：知识准备1：过渡属性当鼠标悬停时，经过2秒延迟，圆形边框开始逐渐变为方形，同时边框颜色从绿色过渡到黄色。整个过渡过程持续3秒，呈现慢速开始和结束的缓动效果。这是通过transition属性设置all值的过渡动画实现的，使边框形状和颜色同时产生平滑变化。div{width:300px;height:300px;border:20pxsolidgreen;border-radius:50%;}div:hover{border-radius:0%;border-color:yellow;/*指定产生动画过渡效果的CSS属性、时间、以慢速开始和结束的过渡效果和动画过渡动作延迟触发*/transition:all3sease-in-out2s;}

方形逐渐过渡为圆形的效果图知识准备2：变形属性1.认识transformtransform是CSS3中用于对元素进行2D或3D变换的核心属性。通过该属性，开发者可以实现元素的位移、旋转、缩放和倾斜等效果，为网页交互带来更加丰富的视觉体验。其语法格式如下：transform属性可应用于各类元素，其默认值none表示不执行变换。通过为其指定translate()、scale()、rotate()等变换函数，可实现丰富的转换效果。具体说明如表所示：transform:none|transform-functions;函数作用translate()基于X和Y坐标重新定位元素，移动元素对象。scale()缩放元素对象，改变元素的尺寸。rotate()旋转元素对象，使元素绕其中心点旋转。过渡属性过渡属性变形属性动画属性知识准备2：变形属性2.2D变形在CSS3中，2D转换主要包括4种转换效果，分别是平移、缩放、倾斜和旋转。（1）平移：translate(x,y)平移是指元素位置的变化，包括水平和垂直移动。在CSS3中，使用translate()函数可以实现元素的平移效果，其基本语法格式如下。

参数x-value和y-value分别用于定义水平(X轴)和垂直(Y轴)坐标。

参数值常用单位为像素和百分比。当参数值为负数时，表示反方向移动元素(向左和向上移动)。

如果省略了第二个参数，则取默认值0，即在该坐标轴不移动。transform:translate(x-value,y-value);translate()函数的使用案例例9-3启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-3.html。部分代码如下：知识准备2：变形属性页面中包含一个带有红色虚线边框的父容器，内部有一个红色背景的子元素。当鼠标悬停在红色子元素上时，该元素会向右平移80px，向下平移20px。.son:hover{transform:translate(80px,20px);/*设置水平向右移动100px，垂直向下移动50px*/}

translate()函数平移后效果图<divclass="father"><divclass="son">平移元素</div></div>知识准备2：变形属性2.2D变形在CSS3中，2D转换主要包括4种转换效果，分别是平移、缩放、倾斜和旋转。（2）缩放：scale(x,y)在CSS3中，scale()函数用于实现元素缩放效果，通过定义宽度（X轴）和高度（Y轴）的缩放比例参数来控制元素尺寸的放大或缩小。基本语法格式如下:

x-value：控制宽度缩放比例

y-value：控制高度缩放比例

单参数时：宽高等比例缩放。transform:scale(x-value,y-value);scale()函数的使用案例例9-4启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-4.html。部分代码如下：知识准备2：变形属性灰色边框父容器内水平排列四个天蓝色矩形。当鼠标悬停父容器时，第二个盒子缩小至0.6倍，第三个盒子宽度放大1.5倍、高度放大2倍，第一和第四个盒子保持不变，缩放过程带有1秒平滑过渡效果，以元素中心为基点缩放，鼠标移出后所有盒子恢复原始尺寸。#box1,#box2,#box3,#box4{float:left;margin:20px;width:140px;height:80px;background-color:skyblue;transition:allease1s;}.father:hover#box2{transform:scale(0.6);/*设置宽度和高度均缩小为原来的一半*/}.father:hover#box3{transform:scale(1.5,2);/*设置宽度放大1.5倍，高度放大2倍*/}scale()函数实现缩放效果知识准备2：变形属性2.2D变形在CSS3中，2D转换主要包括4种转换效果，分别是平移、缩放、倾斜和旋转。（3）旋转：rotate(angle)rotate()函数用于实现元素的旋转效果，通过指定角度值使元素在二维平面内顺时针或逆时针转动。默认情况下，元素以其中心点为旋转中心，该中心点位置可通过transform-origin属性进行调整。1）旋转基础基本语法格式如下:

旋转角度值(angle)以度(deg)为单位，正值表示顺时针旋转，负值表示逆时针旋转，默认以元素中心点为旋转中心。transform:rotate(angle);rotate()函数的使用案例例9-5启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo9-5.html。部分代码如下：知识准备2：变形属性红色虚线边框的父容器内包含一个红色背景的子元素。当鼠标悬停在子元素上时，该元素会以其中心点为基点顺时针旋转45度，旋转过程中元素的尺寸和位置保持不变，仅发生角度变化。.father{margin:60pxauto;border:1pxdashedred;}.son{text-align:center;line-height:100px;background-color:red;transition:allease1s;}.son:hover{transform:rotate(45deg);/*旋转45度*/}通过rotate()方法实现旋转效果知识准备2：变形属性2.2D变形在CSS3中，2D转换主要包括4种转换效果，分别是平移、缩放、倾斜和旋转。2）旋转中心点旋转中心点可以通过transform-origin属性进行自定义设置，该属性用于指定元素变形的基点位置。基本语法格式如下：其中，x-axis定义水平方向的基点位置，y-axis定义垂直方向的基点位置，可以使用关键词（left、center、right、top、bottom）、百分比或具体长度值来指定。transform-origin:x-axisy-axis;旋转中心点的设置案例例9-6启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter08文件夹），新建HTML文件，命名为demo9-6.html。部分代码如下：知识准备2：变形属性当鼠标悬停在容器上时，四个方块同时以不同中心点进行45度顺时针旋转：第一个以元素中心旋转，第二个以左上角为基点旋转，第三个以右下角为基点旋转，第四个以自定义坐标(30px,70px)为基点旋转，所有旋转过程均带有1秒的平滑过渡动画效果，清晰展示了不同旋转中心点带来的视觉差异。.container:hover.center{transform:rotate(45deg);transform-origin:centercenter;/*默认值，可省略*/}.container:hover.left-top{transform:rotate(45deg);transform-origin:lefttop;/*左上角为旋转中心*/}.container:hover.right-bottom{transform:rotate(45deg);transform-origin:rightbottom;/*右下角为旋转中心*/}.container:hover.custom{transform:rotate(45deg);transform-origin:30px70px;/*自定义坐标点为旋转中心*/}设置旋转中心点效果图知识准备2：变形属性3.3D变形2D转换是元素在X轴和Y轴的变化，而3D转换是元素在X轴、Y轴和Z轴的变化。相较于平面化2D转换，3D转换更注重于空间位置上的变化。下面具体介绍网页中一些常用的3D转换效果。（1）3D旋转3D旋转在2D旋转基础上增加了绕X轴、Y轴及Z轴旋转的能力，使元素可以在三维空间中绕指定轴进行立体旋转。这种变换为网页元素创造动态空间视觉效果，是实现三维动画交互的核心技术。1）rotate3d()rotate3d()用于实现同时围绕多个轴的3D旋转，基本语法格式如下。在上述语法格式中，x、y、z的值可以为0或1，当要沿着某个轴旋转，就将对应参数的值设置为1，否设置为0；angle用于定义要旋转的角度。

rotate3d(x,y,z,angle);知识准备2：变形属性3.3D变形2D转换是元素在X轴和Y轴的变化，而3D转换是元素在X轴、Y轴和Z轴的变化。相较于平面化2D转换，3D转换更注重于空间位置上的变化。下面具体介绍网页中一些常用的3D转换效果。（1）3D旋转3D旋转在2D旋转基础上增加了绕X轴、Y轴及Z轴旋转的能力，使元素可以在三维空间中绕指定轴进行立体旋转。这种变换为网页元素创造动态空间视觉效果，是实现三维动画交互的核心技术。2）perspective属性为了呈现良好的3D透视效果，还需要设置perspective属性来定义视距，该属性通过调整观察者与3D元素之间的距离来增强立体空间表现。基本语法格式如下。在上述语法格式中，参数值可以为none或者数值(一般为像素值)。在使用perspectve属性设置3D透效果时，参数值越小，3D透视效果越突出。perspective:参数值;rotate3d()案例例9-7启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-7.html。部分代码如下：知识准备2：变形属性五个天蓝色方块在透视容器中水平排列，悬停时分别呈现不同的3D旋转效果：依次绕X轴翻折、Y轴旋转、Z轴转动、XY轴复合翻转及XYZ轴三维变换，通过rotate3d()函数与透视距离的配合，清晰展现了各轴向旋转的空间差异。.container:hover#box1{transform:rotate3d(1,0,0,60deg);/*主要围绕X轴旋转*/}.container:hover#box2{transform:rotate3d(0,1,0,60deg);/*主要围绕Y轴旋转*/}.container:hover#box3{transform:rotate3d(0,0,1,60deg);/*主要围绕Z轴旋转*/}.container:hover#box4{transform:rotate3d(1,1,0,60deg);/*同时围绕X轴和Y轴旋转*/}.container:hover#box5{transform:rotate3d(1,1,1,60deg);/*同时围绕X、Y、Z轴旋转*/}元素同时在X轴、Y轴和Z轴的3D旋转效果图知识准备2：变形属性3.3D变形CSS3除了提供综合性的rotate3d()函数外，还提供了分别控制各轴向旋转的独立属性，便于精准的单方向旋转控制，为不同动画需求提供更灵活的选择。具体语法与应用示例如表所示。具体语法与应用示例如表所示。属性名作用语法结构语法解释说明rotateX()围绕X轴旋转transform:rotateX(a);参数a为旋转角度(deg)，正值顺时针旋转，负值逆时针旋转rotateY()围绕Y轴旋转transform:rotateY(a);参数a为旋转角度(deg)，正值顺时针旋转，负值逆时针旋转rotateZ()围绕Z轴旋转（垂直于屏幕平面）transform:rotateZ(a);参数a为旋转角度(deg)，正值顺时针旋转，负值逆时针旋转知识准备2：变形属性3.3D变形2D转换是元素在X轴和Y轴的变化，而3D转换是元素在X轴、Y轴和Z轴的变化。相较于平面化2D转换，3D转换更注重于空间位置上的变化。下面具体介绍网页中一些常用的3D转换效果。（2）3D移动3D位移在2D位移基础上增加了Z轴移动能力，实现元素在三维空间中的精准定位。这种变换为网页元素创造深度层次视觉效果，是立体交互设计的关键技术。其基本语法格式如下:其中，x：定义元素在X轴（水平方向）的位移距离；y：定义元素在Y轴（垂直方向）的位移距离；z：定义元素在Z轴（前后方向）的位移距离（近大远小）注意：必须设置透视（perspective）才能观察到Z轴移动效果。transform:translate3d(x,y,z);translate3d()3D移动效果案例例9-8启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-8.html。部分代码如下：知识准备2：变形属性当鼠标悬停在灰色边框区域内时，五个蓝色方块分别沿不同轴向进行3D位移：第一个沿X轴移动，第二个沿Y轴移动，第三个沿Z轴（产生近大远小效果），第四个同时沿X和Y轴，第五个同时沿X、Y、Z轴移动；所有位移均带有1秒平滑过渡动画，设置的300px透视距离增强了3D空间感。.container:hover#box1{transform:translate3d(50px,0,0);/*仅X轴移动*/}.container:hover#box2{transform:translate3d(0,50px,0);/*仅Y轴移动*/}.container:hover#box3{transform:translate3d(0,0,50px);/*仅Z轴移动*/}.container:hover#box4{transform:translate3d(50px,50px,0);/*X和Y轴同时移动*/}.container:hover#box5{transform:translate3d(50px,50px,100px);/*X、Y、Z轴同时移动*/}元素的3D移动效果图知识准备2：变形属性3.3D变形CSS3除了提供综合性的translate3d()函数外，还提供了分别控制各轴向移动的独立属性，便于精准的单方向位移控制，为不同动画需求提供更灵活的选择。具体语法与应用示例如表所示。单一轴向属性适用于只需要在某一个方向进行位移的简单场景，当需要同时在多个方向位移时，建议使用translate3d以提高代码效率。属性名语法示例与效果描述translateXtransform:translateX(value);translateX(100px)

元素仅沿X轴向右移动100像素translateYtransform:translateY(value);translateY(50px)

元素仅沿Y轴向下移动50像素translateZtransform:translateZ(value);translateZ(80px)

元素仅沿Z轴向观察者方向移动80像素变形属性过渡属性变形属性动画属性知识准备3：动画属性1.@keyframes定义动画使用@keyframes规则可以创建动画，通过在动画序列中定义关键帧的样式来实现元素从一种样式逐渐变化为另一种样式的效果。其基本语法格式如下：@keyframes动画名称{0%{/*起始状态样式*/}100%{/*结束状态样式*/}}动画序列说明：0%是动画的开始，100%是动画的完成，这样的规则就是动画序列在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果可以改变任意多的样式任意多的次数可以使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%知识准备3：动画属性2.动画属性定义好动画后，需要通过CSS动画属性将动画应用到元素上。将动画应用到元素主要有两种方式：（1）使用简写animation属性简写属性animation是最常用的方法，它能够一次性设置动画的所有参数，基本语法如下：语法格式解释说明，如表所示.element{animation:动画名称

持续时间

速度曲线

延迟时间

播放次数

播放方向

填充模式;}知识准备3：动画属性2.动画属性属性名是否必选取值说明动画名称必选对应@keyframes定义的动画名称持续时间必选动画完成一个周期的时间，单位：秒(s)或毫秒(ms)速度曲线可选ease（默认，慢-快-慢）、linear（匀速）、ease-in（慢速开始）、ease-out（慢速结束）、ease-in-out（慢速开始和结束）延迟时间可选动画开始前的等待时间，单位：秒(s)或毫秒(ms)，默认：0播放次数可选数字（如2、3）或infinite（无限循环），默认：1播放方向可选normal（默认，正常播放）、reverse（反向播放）、alternate（正反交替）、alternate-reverse（反-正交替）填充模式可选none（默认）、forwards（保留结束状态）、backwards（应用起始状态）、both（同时应用起始和结束状态）实例：animation:slide3sease-in1sinfinitealternate;

示例解释：动画名称为slide，持续3秒，缓动函数为ease-in，延迟1秒开始，无限循环，正反交替播放@keyframes定义动画的基本用法案例例9-9启动VSCode，打开"OpenFolder"对话框，选择已有目录文件夹（例如，chapter09文件夹），新建HTML文件，命名为demo9-9.html。代码如下：知识准备3：动画属性页面中的蓝色圆形元素在3秒内完成从起点向右平移的动画过程：先水平移动到200px位置并变为黄色，再继续移动到400px位置并变为橘色。@keyframesmove{/*定义动画*/0%{transform:translateX(0);}50%{transform:translateX(200px);border-radius:20%;background-color:yellow;}100%{transform:translateX(400px);border-radius:50%;background-color:orange;}}动画效果图.box{width:100px;height:100px;background-color:skyblue;animation:move5s/*调用名为move的动画,持续时间为3s*/}知识准备3：动画属性2.动画属性定义好动画后，需要通过CSS动画属性将动画应用到元素上。将动画应用到元素主要有两种方式：（2）使用分解的动画属性CSS3除了提供综合性的animation简写属性外，还提供了分别控制动画各个方面的独立属性，便于精准的动画参数控制，为不同动画需求提供更灵活的选择。具体语法如表所示。属性名语法取值说明animation-nameanimation-name:动画名称;指定要应用的@keyframes动画名称animation-durationanimation-duration:时间;动画周期时长，单位：秒(s)或毫秒(ms)animation-timing-functionanimation-timing-function:速度曲线;控制动画速度变化，如ease、linear、ease-in等animation-delayanimation-delay:时间;动画开始前的延迟时间，默认0animation-iteration-countanimation-iteration-count:次数;动画重复次数，数字或infinite，默认1animation-directionanimation-direction:方向;播放方向：normal、reverse、alternate等animation-fill-modeanimation-fill-mode:模式;动画外时间样式：none、forwards、backwards、bothanimation-play-stateanimation-play-state:状态;播放状态：running（运行）或paused（暂停）动画属性任务描述知识准备任务实现任务小结任务测试与考核实训制作客户案例页面。包括企业实现智能办公升级和赋能服务模块。1.HTML结构（1）创建“企业实现智能办公升级”展示区结构。（2）创建“赋能服务”展示区结构。2.CSS样式（1）整体页面的版心宽度设置1200px，并居中显示；（2）“企业实现智能办公升级”部分背景颜色为浅灰色（#eaeef6）；（3）每个内容盒子的大小为宽度386px，高度390px，背景颜色为白色，左外边距20px，下外边距20px；（4）设置鼠标经过时标题颜色变蓝加粗，盒子产生阴影效果并向左上移动2px；（5）“赋能服务”部分背景颜色为白色（#fefeff），鼠标经过图片产生放大动画效果。任务描述在VSCode中打开chapter09目录，创建CustomerCase项目文件夹。项目结构如下：页面文件：Case.html资源目录：images（存放图片）样式文件：css/Case.css制作客户案例页面1.创建项目首先，对CSS样式进行初始化设置，以消除不同浏览器默认样式的影响，从而提高开发效率。引入base.css样式，主要设置如下：移除所有元素的外边距和内边距，简化布局设计。统一设置所有元素的字体为“黑体”。移除列表项（li）前的标记。移除超链接（a）的下划线，并设置其文本颜色为深灰色。部分代码如下：制作客户案例页面2.设置网页通用样式然后，将base.css文件引入Case.html文件，打开Caes..html文件,在<head></head>标签中输入如下代码：/*去掉li的小圆点*/li{

list-style:none}

img{

/*border0照顾低版本浏览器如果图片外面包含了链接会有边框的问题*/

border:0;

/*取消图片底侧有空白缝隙的问题*/

vertical-align:middle}

button{

/*当我们鼠标经过button按钮的时候，鼠标变成小手*/

cursor:pointer}a{

color:#666;

text-decoration:none}

<linkrel="stylesheet"href="css/base.css">在Case.html文件的<body></body>标签中继续输入如下代码：制作客户案例页面2.设置“企业实现智能办公升级”模块网页结构<!--企业实现智能办公升级--><figure><divclass="containerbusiness"><h2class="title2">已帮助<i>30000+</i>企业实现智能办公升级</h2><divclass="box_bd"><ahref="#"><imgsrc="images/Case600400-1.png"alt=""><h3class="boxtitle">智能办公升级：效率与创新的飞跃</h3><p>通过智能化技术，打破传统办公效率瓶颈，推动企业创新与高效协作，迈向数字化转型新阶段。</p></a><ahref="#"><imgsrc="images/Case600400-2.png"alt=""><h3class="boxtitle">智能办公升级：效率与创新的飞跃</h3><p>通过智能化技术，打破传统办公效率瓶颈，推动企业创新与高效协作，迈向数字化转型新阶段。</p></a><ahref="#"><imgsrc="images/Case600400-3.png"alt=""><h3class="boxtitle">智能办公升级：效率与创新的飞跃</h3><p>通过智能化技术，打破传统办公效率瓶颈，推动企业创新与高效协作，迈向数字化转型新阶段。</p></a></div></div></figure>在Case.css文件中输入如下代码：figure{background-color:#eaeef6;}.container{width:1200px;margin:0auto;}.business{overflow:hidden;}.box_bd{overflow:hidden;/*用于清除浮动*/}.box_bd>a{float:left;display:block;width:386px;height:390px;text-align:center;background-color:rgb(255,255,255);margin-left:20px;margin-bottom:20px;transition:all.3slinear;}制作客户案例页面2.设置“企业实现智能办公升级”模块网页样式/*结构伪类选择器，使最左侧的盒子没有做外边距*/.box_bd>a:nth-child(3n-2){margin-left:0px;}.box_bd>a>img{width:100%;height:60%;}.box_bd>a>h3{font-size:22px;font-weight:400;line-height:3em;}.box_bd>a>p{width:100%;padding:020px;font-size:16px;line-height:2em;text-align:left;}.box_bd>a:hover{box-shadow:015px30pxrgba(0,0,0,.2);transform:translate3d(-2px,-2px,0);}.box_bd>a:hover.boxtitle{font-weight:600;color:#0066ff;}效果如图所示：然后，将base.css文件引入Case.html文件，打开Caes..html文件,在<head></head>标签中输入如下代码：

<linkrel="stylesheet"href="css/Case.css">在Case.html文件的<body></body>标签中继续输入如下代码：制作客户案例页面3.设置“极尽可能成就客户”模块网页结构<divclass="CustomerService"><h2class="title2">极尽所能<i>成就</i>客户</h2><divclass="containerinii"><divclass="CustomersSetCustomersRight"><divclass="no1"><imgclass="imgAction"src="./images/caseExemple01.png"alt=""><p>智链AI办公精英特训营：打造一支高效团队的答案在这里</p></div><divclass="no1"><imgclass="imgAction"src="./images/caseExemple02.png"alt=""><p>智链AI办公精英特训营：打造一支高效团队的答案在这里</p></div><divclass="no1"><imgclass="imgAction"src="./images/caseExemple03.png"alt=""><p>智链AI办公精英特训营：打造一支高效团队的答案在这里</p></div></div></div></div>在Case.css文件中继续输入如下代码：.title2{margin:30px0;text-align:center;vertical-align:baseline;font-weight:400;font-size:48px;color:#111f2c;}.title2>i{font-size:48px;color:#0066ff;vertical-align:baseline;}.CustomersRight{margin-right:0px;width:1200px;border:none;margin-top:20px;}.CustomersRight>.no1{position:relative;width:390px;height:167px;margin-bottom:20px;border-radius:10px;margin-right:15px;overflow:hidden;float:left;}.制作客户案例页面2.设置“企业实现智能办公升级”模块网页样式.CustomersRight:last-child{margin-bottom:0px;

}.CustomersRight.no1:last-child{margin-right:0px;}.CustomersRight>.no1:hover.imgAction{transform:scale(1.2);}.CustomersRightimg{width:100%;height:100%;transition:transform0.5sease;/*添加过渡效果*/transform-origin:center;/*设置缩放的起点为图片中心*/}.CustomersRightp{position:absolute;top:125px;left:0px;width:100%;padding:10px;background:rgba(0,0,0,.6)