前端开发_HTML5_CSS部分-过渡特效(transition)

页面特效1.引入CSS3除了可以实现传统意义上的样式之外，还提供了一些比较特殊的特效，那么下面我们一起来学习一下这一些特效。学习完这一些特效将会更加丰富我们的页面美化效果。2.页面特效分类CSS提供了比较多的页面特效，下面我们主要学习其中主要的两种:过渡和动画3.过渡(transition)(1)、过渡概述:过渡允许您在给定的时间内平滑地改变属性值。说白了就是页面的上元素从一个状态改变到另一个状态

魔笛手7

2310人浏览 · 2021-12-19 19:22:39

魔笛手7 · 2021-12-19 19:22:39 发布

过渡特效(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>