标签：box background ease transition HTML5 过渡 border 前端开发
过渡特效(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>
标签：box,background,ease,transition,HTML5,过渡,border,前端开发 来源： https://blog.csdn.net/u013185175/article/details/122019498
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。