过渡特效(transition)
1.引入
CSS3除了可以实现传统意义上的样式之外，还提供了一些比较特殊的特效，那么下面我们一起来学习一下这一些特效。学习完这一些特效将会更加丰富我们的页面美化效果。
2.页面特效分类
CSS提供了比较多的页面特效，下面我们主要学习其中主要的两种:过渡和动画,那么我们现在先说一下过渡。
3.过渡(transition)
(1)、过渡概述:过渡允许您在给定的时间内平滑地改变属性值。说白了就是页面上元素从一个状态改变到另一个状态的变化过程。
(2)、过渡相关属性以及参数说明
过渡相关语法
transition-delay:指定过渡开始前的延迟时间(单位为秒)
transition-duration:指定过渡的持续时间(单位可以为秒，也可以为毫秒)
transition-property:指定过渡的相关属性，这一个参数实质是指整个过渡的过程中，是哪一些css样式在改
变，我们只需要把这一些参数写在其后面，中间使用","隔开就行。
transition-timing-function:指定过渡效果的变化速度。其指主要有以下几个:
ease:默认值，从慢速开始，然后开始加速，然后再以慢速结尾的过渡方式。
linear:从始至终以相同的速度结束的过渡效果。
ease-in:以慢速开始的过渡效果
ease-out:以慢速结束的过渡效果
ease-in-out:以慢速开始、慢速结束的过渡效果
(3)、过渡基本使用相关代码实现以及实现效果
<style type="text/css">
.box1{
width: 300px;
height: 150px;
border: 1px solid black;
font-size: 20px;
font-family: "宋体";
border-radius: 10px;
box-shadow: 0px 0px 50px #008000;
background-color: #55ffff;
}
.box1:hover{
width: 100px;
height: 50px;
font-size: 2px;
font-family: "宋体";
border-radius: 1px;
background-color: #48916b;
box-shadow: 0px 0px 5px #00ea00;
transition-delay: 1s;
transition-duration: 2000ms;
transition-property: width,height,font-size,font-family,border-radius,background-color,box-shadow,border;
}
</style>
<body>
<div class="box1">
过渡的基本使用
</div>
</body>
(4)、过渡变化速率使用相关代码实现以及实现效果
<style type="text/css">
.containner {
width: 700px;
height: 350px;
border: 1px solid red;
}
.box {
width: 150px;
height: 50px;
border: 1px solid black;
margin-top: 10px;
}
#ease {
background-color: #008000;
transition: all 5s ease 0.3s;
}
#ease-in {
background-color: #aa007f;
transition: all 2s ease-in 0.5s;
}
#ease-out {
background-color: #55ff00;
transition: all 1s ease-out 0.1s;
}
#ease-in-out {
background-color: #ffff00;
transition: all 3s ease-in-out 0.2s;
}
#linear {
background-color: #ff5500;
transition: all 4s linear 0.2s;
}
<!--设置渐变的触发方式-->
.containner,.containner:hover .box{
background: #555500;
border: 1px solid #0000ff;
border-radius: 10px;
margin-left: 500px;
}
</style>
<body>
<div class="containner">
<div id="ease" class="box">
ease box
</div>
<div id="ease-in" class="box">
ease-in box
</div>
<div id="ease-out" class="box">
ease-out box
</div>
<div id="ease-in-out" class="box">
ease-in-out box
</div>
<div id="linear" class="box">
linear box
</div>
</div>
</body>