5. CSS3 的过渡属性
- transition
- transition-property:过渡属性(默认值为all)
- transition-duration:过渡持续时间(默认值为0s)
- transiton-timing-function:过渡函数(默认值为ease函数)
- transition-delay:过渡延迟时间(默认值为0s)
5.1 制作缓慢变长的方形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition</title>
<link rel="stylesheet" href="./style16.css">
</head>
<body>
<div class="ceng1">1</div>
<div class="ceng2">2</div>
<div class="ceng3">3</div>
<div class="ceng4">4</div>
<div class="ceng5">5</div>
<div class="ceng6">6</div>
<div class="ceng7">7</div>
</body>
</html>
div {
width: 100px;
height: 100px;
margin-top: 100px;
background-color: khaki;
cursor: pointer;
}
.ceng1 {
transition-duration: 2s;
/* 所有都变化 */
transition-property: all;
}
.ceng2 {
transition-duration: 3s;
/* 只有宽度有过渡变化 */
transition-property: width;
}
.ceng3 {
transition-duration: 3s;
/* 只有高度有过渡变化 */
transition-property: height;
}
.ceng1:hover {
width: 300px;
height: 200px;
}
.ceng2:hover {
width: 300px;
height: 200px;
}
.ceng3:hover {
width: 300px;
height: 200px;
}
.ceng4 {
transition-duration: 2s;
transition-property: all;
/* 延迟过渡 */
transition-delay: .2s;
}
.ceng4:hover {
width: 300px;
height: 200px;
}
.ceng5 {
transition-duration: 2s;
transition-property: all;
/* 延迟过渡 */
transition-delay: .2s;
/* 默认值 ease */
transition-timing-function: ease;
}
.ceng5:hover {
width: 300px;
height: 200px;
}
.ceng6 {
transition-duration: 2s;
transition-property: all;
/* 延迟过渡 */
transition-delay: .2s;
/* 默认值 ease */
transition-timing-function: ease;
}
.ceng6:hover {
width: 300px;
height: 200px;
/* 过渡背景颜色 */
background-color: coral;
}
.ceng7 {
transition-duration: 2s;
transition-property: all;
/* 延迟过渡 */
transition-delay: .2s;
/* 默认值 ease */
transition-timing-function: ease;
}
.ceng7:hover {
width: 300px;
height: 200px;
/* 过渡背景颜色 */
background-color: coral;
/* 过渡边框 */
border-radius: 40px;
}
5.2 transition-timing-function 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition</title>
<link rel="stylesheet" href="./style17.css">
</head>
<body>
<div class="ceng1">1</div>
<div class="ceng2">2</div>
<div class="ceng3">3</div>
<div class="ceng4">4</div>
<div class="ceng5">5</div>
<div class="ceng6">6</div>
<div class="ceng7">7</div>
</body>
</html>
div {
width: 100px;
height: 100px;
margin-top: 100px;
background-color: khaki;
cursor: pointer;
transition-duration: 1s;
transition-property: all;
transition-delay: .2s;
}
.ceng1 {
/* 慢速开始,然后变快,然后慢速结束的过渡效果 */
transition-timing-function: ease;
}
.ceng2 {
/* 以慢速开始的过渡效果 */
transition-timing-function: ease-in;
}
.ceng3 {
/* 以慢速开始和结束的过渡效果 */
transition-timing-function: ease-in-out;
}
.ceng4 {
/* 以慢速结束的过渡效果 */
transition-timing-function: ease-out;
}
.ceng5 {
/* 以相同速度开始至结束的过渡效果 */
transition-timing-function: linear;
}
.ceng6 {
/* 直接变化 */
transition-timing-function: step-start;
}
.ceng7 {
/* transition-duration 设置的秒数内都不变,结束后立即变化 */
transition-timing-function: step-end;
}
div:hover {
width: 300px;
}
5.3 制作天猫首页的类别展示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>制作天猫首页的类别展示效果</title>
<link rel="stylesheet" href="./style18.css">
</head>
<body>
<div class="main">
<ul>
<li>
<div class="m_title">亿苔</div>
<div class="m_cotent">护眼台灯</div>
<div class="m_img"><img src="../img/deng.png" alt="#"></div>
</li>
</ul>
</div>
</body>
</html>
在鼠标经过商品图片时出现过渡效果
* {
padding: 0px;
margin: 0px;
/* background-color: rgb(246,245,248); */
font-family: 'Microsoft YaHei';
}
.main {
margin: 10px auto;
width: 230px;
border: 1px solid #ccc;
text-align: center;
}
.main li {
list-style: none;
cursor: pointer;
}
.m_title {
font-size: 20px;
font-weight: bold;
margin: 5px;
}
.m_cotent {
color: #666;
margin-bottom: 15px;
}
.m_img {
position: relative;
padding-top: 30px;
padding-bottom: 30px;
}
.m_img::before {
content: '';
position: absolute;
width: 150px;
height: 150px;
background-color: #eee;
border-radius: 50%;
z-index: -1;
left: 43px;
top: 3px;
}
.m_img img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s ;
}
.main li:hover .m_img img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
img {
width: 50%;
height: 50%;
}
5.4 仿天猫类别过渡效果制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿天猫类别过渡效果制作</title>
<link rel="stylesheet" href="./style19.css">
</head>
<body>
<div class="main">
<div class="m_title">亿苔</div>
<div class="m_cotent">护眼台灯</div>
<div class="m_img"><img src="../img/deng.png" alt="#"></div>
</div>
</body>
</html>
在鼠标经过商品图片时出现过渡效果
.main {
width: 260px;
height: 270px;
border: 1px solid #ccc;
margin: 50px auto;
font-family: 'Microsoft YaHei';
}
.m_title {
text-align: left;
font-size: 20px;
padding: 20px 10px 10px 10px;
}
.m_content {
color: #11ccaa;
padding: 0px 10px 10px 10px;
}
.m_img {
text-align: right;
position: relative;
}
.m_img img {
position: absolute;
width: 180px;
top: 0px;
right: 0px;
-webkit-transition: right .3s;
-o-transition: right .3s;
transition: right .3s;
}
.main:hover img {
right: 10px;
}