CSS3过渡效果
CSS3 过渡效果（Transitions）
CSS3 过渡效果可以使元素从一种样式平滑地过渡到另一种样式，增强网页的交互性和视觉效果。过渡效果主要通过 transition 属性来实现。
基本语法
.element {
transition: property duration timing-function delay;
}property: 要应用过渡效果的 CSS 属性。
duration: 过渡效果的持续时间，例如 1s 表示 1 秒。
timing-function: 过渡效果的速度曲线，例如 linear、ease、ease-in、ease-out、ease-in-out。
delay: 过渡效果的延迟时间。
简单示例
创建一个鼠标悬停时改变背景色的过渡效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Transition Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个示例中：
transition: background-color 0.5s ease; 为 .box 元素添加了一个过渡效果，当背景色改变时，过渡效果将持续 0.5 秒，并以 ease 曲线平滑过渡。
多属性过渡
可以同时对多个属性应用过渡效果，只需用逗号分隔每个属性。
.element {
transition: width 2s, height 2s, background-color 0.5s ease-in-out;
}综合示例
创建一个鼠标悬停时改变尺寸、背景色和边框半径的过渡效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Transition Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
border-radius: 0;
transition: width 1s, height 1s, background-color 0.5s ease-in-out, border-radius 1s;
}
.box:hover {
width: 300px;
height: 300px;
background-color: lightcoral;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个示例中：
为 .box 元素添加了多个属性的过渡效果，包括宽度、高度、背景色和边框半径。
当鼠标悬停在 .box 元素上时，宽度和高度增加，背景色变为 lightcoral，边框半径变为 50%。
过渡效果的时间函数
常用的时间函数包括：
linear：匀速过渡。
ease：默认值，逐渐变慢。
ease-in：逐渐加速。
ease-out：逐渐减速。
ease-in-out：先加速后减速。
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线。
使用过渡效果的实用建议
选择合适的时间函数：根据具体效果选择合适的时间函数，可以提升用户体验。
过渡效果要适度：过渡效果要适度使用，避免过多或过长的过渡效果影响页面性能和用户体验。
结合伪类：结合 :hover、:focus 等伪类，可以实现交互性更强的过渡效果。
练习题：CSS3 过渡效果
目标：创建一个卡片布局，当鼠标悬停在卡片上时，卡片的大小、背景色和边框半径会发生平滑的变化。
要求：
创建一个卡片元素，初始宽度为 200px，高度为 150px，背景色为 #f0f0f0，边框半径为 10px。
当鼠标悬停在卡片上时，卡片的宽度增加到 250px，高度增加到 200px，背景色变为 #ffcccb，边框半径增加到 20px。
使用 CSS3 过渡效果实现这些变化，过渡时间为 0.5 秒，过渡曲线使用 ease-in-out。
参考答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3过渡效果</title>
<style>
.card {
width: 200px;
height: 150px;
background-color: #f0f0f0;
border-radius: 10px;
transition: width 0.5s ease-in-out, height 0.5s ease-in-out, background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
margin: 50px auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
.card:hover {
width: 250px;
height: 200px;
background-color: #ffcccb;
border-radius: 20px;
}
</style>
</head>
<body>
<div>鼠标放我上面!</div>
</body>
</html>
需要购买本课才能留言哦~