用css3的transition实现过渡动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JianXingDeFeng/article/details/78708274

CSS3,用transition实现过渡动画

用到了transition就先说说这个属性吧!


一、transition属性简介

transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画!在CSS3出现之前,网页上的动画大多是用flash实现的,flash动画会产生很大的弊端!操作不便等等

1. 语法

	transition: property duration timing-function delay;

2. 定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property
--规定设置过渡效果的 CSS 属性的名称。
transition-duration
--规定完成过渡效果需要多少秒或毫秒。
transition-timing-function
--规定速度效果的速度曲线。
transition-delay
--定义过渡效果何时开始。


transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。
提示:过渡效果通常在用户将鼠标指针浮动到元素上时发生。

	transition-property: none|all|property;

描述
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。




transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。
	transition-duration: time;

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
描述
      time    规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,意味着不会有效果。


transition-timing-function 属性

transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。
	transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。推荐个有意思的链接,贝塞尔曲线链接







transition-delay

transition-delay 值以秒或毫秒计。
	transition-delay: time;

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
描述
        time 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。




二丶介绍下他们的使用情况吧

1.首先,先写个字体出来吧!那就我上一篇介绍的火焰字好了!上篇的代码对这篇的代码不会有干扰的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小效果</title>

	<style type="text/css">
		/*通配符重置浏览器默认的两个值,
		对本文没有太大影响,不知道可以无视*/
		*{
			margin: 0;
			padding: 0;
		}
		.div1{
			width: 300px;
			height: 100px;
			padding-top: 20px;
			line-height: 100px;
			margin:200px auto 0;
			text-align: center;
			font-size: 40px;
			font-weight: bold;
			font-family: "华文行楷";
			background: #000;
			color:#F60;
		}
	</style>
</head>
<body>
	<div class="div1">超炫火焰字</div>
</body>
</html>


效果如图:

2.其次,我们在.div{..略..}后面加上如下代码

		.div1:hover{
			text-shadow: 0px 0px 2px #fff,
					0px -3px 3px #1EB,
					0px -6px 4px #01DEFD,
					0px -9px 5px #0BF,
					0px -12px 6px #08F;
		}

我们就会发现当我们鼠标移进这个div的时候,文字的阴影是不是一瞬间出现的?很明显是的


3.最后,我们在.div{..略..}里面加上如下代码
		
	transition-property: all;/*变化的东西。all是所有*/
	transition-duration: 1s;/*变化过程的时间*/
	transition-timing-function: linear;/*linear是匀速变化*/
	transition-delay: 0s;/*没有延迟变化*/
	/*下面的是简写属性*/
	/*
		transition:all 1s linear 0s;
	*/

我们是不是发现这个背景阴影是不是经过1s中的过渡过程才能达到最后的变化?这样是不是感觉灰常有意思?

变化过程:
变化结果:


好了,本次文章到此结束,谢谢观看


没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试