过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
每一组之内的值用空格隔开，如果有多组属性变化需要设置，还是用逗号隔开。
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
如果想要所有的属性都变化过渡， 写一个all 就可以,这里的all是指下面的hover里设置的属性
transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始
运动曲线：
linear： 匀速
ease： 逐渐减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: #ccc;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
transition: width 1s ease-in-out 1s, height 1s ease-in-out 1s;
/* transition: all 1s ease-in-out 1s;这里宽高的变化值都是一样的，这样的就不用写两组了，直接写all就可以了*/
/*transition要写到div里，不能写在hover里，如果写在hover里，虽然该有的效果还是会有，但是鼠标离开后收回去的动作一下就收回去了，不会按照设置慢慢的收回去*/
}
div:hover { /*鼠标经过盒子，宽度变成400*/
/*transition: width 1s ease-in-out 1s, height 1s ease-in-out 1s;*/
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例:
- 设置轮播图右边的小课表 全部课程按钮颜色延时出现
- 设置课程推荐盒子 当鼠标经过后，盒子向上移动并且出现阴影
/* 样式 */
/* css初始化 */
* {
margin: 0;
padding: 0; /* 清除内外边距 */
}
ul {
list-style: none; /* 去掉列表样式小点 */
}
.clearfix:before, .clearfix:after { /* 清除浮动 */
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
a {
color: #050505;
text-decoration: none; /* 取消下划线 */
}
input {
border: 0; /* 所有的表单边框为0 */
box-sizing: border-box; /* CSS3盒子模型 border 和 padding 都包含到 width 里面去 */
}
.container { /* 因为我们的版心宽度都是1200 都要居中对齐 我们就声明一个公共类 */
width: 1200px;
margin: 0 auto;
}
/* css初始化结束 */
/* 页面头部分 */
body {
background-color: #f3f5f7; /* 整个页面的背景色 */
}
header {
height: 100px;
/* background-color: pink; */
overflow: hidden;
}
nav {
width: 1366px; /* 宽度暂且定为1366 */
height: 42px;
margin: 26px auto ; /* 盒子水平居中对齐 */
}
.logo {
float: left;
width: 199px;
height: 46px;
background-color: pink;
background: url(images/sprite.png) no-repeat;
}
.navbar {
float: left;
height: 42px;
line-height: 42px; /* 这个行高给父亲， 行高会继承 */
margin-left: 50px;
}
.navbar li {
float: left; /* 让 首页 课程 这个一行显示 */
}
.navbar li a {
padding: 0 10px; /* 上下 0 左右 8像素 */
display: block; /* a是行内元素，给高需要转换块级 */
height: 42px;
}
.navbar li a:hover {
border-bottom: 2px solid #00a4ff; /* 鼠标放入底边框 */
}
/* 搜索框部分开始 */
.search {
width: 410px; /* 360 + 50 */
height: 38px;
border: 1px solid #00a4ff;
float: right;
}
.search input[type=text] { /* 属性选择器 type 为 text 的文本框 */
/* background-color: pink; */
width: 360px;
height: 38px;
padding-left: 20px;
float: left;
}
.search input[type=submit]{/* 属性选择器 type 为 submit 的文本框 */
width: 50px;
height: 38px;
float: left;
background: #00a4ff url(images/search_06.png) center center no-repeat;
}
/* 搜索框部分结束 */
/* 个人中心开始 */
.personal {
float: right;
height: 42px;
line-height: 42px; /* 这个行高给父亲， 行高会继承 */
margin: 0 15px 0 35px; /* 上0 右 15 下0 左 35 */
}
.personal img {
margin: 0 8px;
/*vertical-align: middle;*/
}
/* 个人中心结束 */
/* banner start */
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px;
background: url(images/banner_03.png) 0 0 no-repeat;
position: relative; /* 子绝父相 */
}
.slidebar {
height: 420px;
width: 190px;
background: rgba(0, 0, 0, 0.3);/* 盒子背景半透明 */
float: left;
}
.slidebar li a {
color: #fff;
font-size: 14px;
padding: 0 20px;
/* a是行内元素，没有大小需要转换 */
display: block;
line-height: 45px; /* 单行垂直居中 个人经验，很多情况下， 有了行高可以不用给高度 */
}
.slidebar li a:hover {
color: #00a4ff ;
}
.slidebar a span {
float: right;
font-family: arial; /* 一般情况我们的符号都用这个字体 */
}
.timetable {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.timetable dt {
height: 50px;
line-height: 50px;
background-color: #9bceea;
text-align: center; /* 文字水平居中 */
color: #fff;
font-weight: 700; /* 文字加粗 */
letter-spacing: 2px; /* 设置字间距 */
margin-bottom: 5px;
}
.timetable dd {
width: 193px;
height: 60px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
padding-top: 12px;
box-sizing: border-box;
}
.timetable dd:last-child { /* 结构伪类选择器 选最后一个孩子 但是要求这个孩子是dd */
border: 0;
}
.timetable dd h4 {
font-size: 16px;
font-weight: normal; /* 让粗体不变粗 */
color: #4e4e4e;
}
.timetable dd p {
color: #a5a5a5;
font-size: 14px;
}
.timetable dd a {
height: 38px;
border: 1px solid #00a4ff;
display: block;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-weight: 700; /* 文字加粗 700 不要加单位 */
transition: all 0.5s; /* 背景颜色和文字颜色都变化 用all all是hover里的值*/
/* ctrl+g 快速到某一行 */
}
.timetable dd a:hover { /* 自己添加 */
background-color: #00a4ff;
color: #fff;
}
/* 小圆点模块 */
.circle {
width: 180px;
height: 22px;
/* background-color: pink; */
position: absolute;
bottom: 10px;
left: 50%; /* 父盒子宽度的一半 */
margin-left: -90px; /* 水平居中算法 */
}
.circle li { /* 0011 权重 */
float: left;
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.4);
margin: 6px 8px; /* 上下6 左右 8 */
border-radius: 50%;
cursor: pointer; /* 鼠标变成小手形状 */
}
.circle .current {
width: 19px;
border-radius: 5px;
background-color: #fff;
}
/* banner end */
/* 精品推荐模块 start*/
.recommend {
height: 60px;
line-height: 60px;
background-color: #fff;
margin-top: 8px;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
/* 盒子阴影 水平位置 垂直位置 模糊距离 影子颜色 */
}
.recommend a {
padding: 0 30px;
border-right: 1px solid #ccc;
}
.recommend a:hover {
color: #00a4ff;
}
.recommend a:first-child {
color: #00a4ff;
}
.recommend a:last-child {
color: #00a4ff;
border: 0;
float: right;
font-size: 14px;
}
.recom-products {
margin-top: 35px;
}
.recom-hd {
height: 40px;
}
.recom-hd h4 {
float: left;
color: #494949;
}
.recom-hd a {
float: right;
margin-top: 10px;
margin-right: 30px;
font-size: 14px;
color: #a5a5a5;
}
.recom-hd a:hover {
color: #00a4ff;
}
/* 精品推荐主体部分 */
.recom-bd ul li {
width: 228px;
height: 270px;
background-color: #fff;
/*overflow: hidden; 溢出隐藏 */
/* box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影； */
float: left;
margin-right: 15px;
margin-top: 15px;
position: relative; /* 子绝父相 */
transition: all 0.2s;
}
.recom-bd ul li:hover { /*仿小米的盒子，鼠标经过后，盒子向上移动，并且出现阴影*/
margin-top: 10px;/*鼠标经过盒子后，盒子有一个向上的效果*/
box-shadow: 0 10px 5px 5px rgba(0, 0, 0, 0.2);/*鼠标经过后，出现阴影*/
}
.over {
overflow: hidden;
}
.hot {
width: 40px;
height: 23px;
background-color: pink;
position: absolute;
right: -3px;
top: 5px;
background: url(images/sprite.png) no-repeat 0 -85px;
}
.recom-bd ul li:nth-child(5n) { /* 5n n从0开始的， 0 1 2 3 5n 就是5 的倍数 */
margin-right: 0;
}
.recom-bd li h5,
.recom-bd li p {
padding: 0 20px 0 24px;
margin-top: 12px;
}
.recom-bd li h5 {
font-size: 14px;
line-height: 22px;
font-weight: normal;
}
.recom-bd li p {
font-size: 12px;
color: #999;
}
.recom-bd p span {
color: #ff7c2d;
}
/* 页面底部分 */
footer {
height: 270px;
background-color: #fff;
margin-top: 100px;
}
.footer-in {
padding-top: 30px;
}
.footer-l {
float: left;
}
.footer-l p {
font-size: 12px;
line-height: 18px;
color: #999;
margin-top: 20px;
}
.footer-l a {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
font-size: 16px;
color: #00a4ff;
text-align: center;
line-height: 33px;
margin-top: 15px;
}
.footer-r {
float: right;
color: #333;
}
.footer-r dl {
float: left;
width: 225px;
}
.footer-r dt {
font-size: 16px;
height: 30px;
}
.footer-r dd {
font-size: 12px;
height: 20px;
}
.footer-r dd a:hover {
color: #00a4ff;
text-decoration: underline; /* 添加下划线 */
}
鼠标经过后慢慢的显示颜色，不是直接出现：
image.png
鼠标经过后盒子向上移动并且出现阴影
image.png
网友评论