用css3的transition实现过渡动画

最新推荐文章于 2024-04-22 20:01:30 发布

JianXingDeFeng

最新推荐文章于 2024-04-22 20:01:30 发布

阅读量2.2w

点赞数 12

分类专栏： CSS 文章标签： css3 过渡动画鼠标hover过渡

本文链接：https://blog.csdn.net/JianXingDeFeng/article/details/78708274

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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中的过渡过程才能达到最后的变化？这样是不是感觉灰常有意思？

变化过程：

变化结果：

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

JianXingDeFeng

关注

12
点赞
踩
61

收藏

觉得还不错? 一键收藏
0
评论
用css3的transition实现过渡动画

CSS3,用transition实现过渡动画用到了transition就先说说这个属性吧！一、transition属性简介transition是网页上的过渡动画，变化的逐渐过渡效果，简称过渡动画！在CSS3出现之前，网页上的动画大多是用flash实现的，flash动画会产生很大的弊端！操作不便等等1. 语法 transition: property duration t
复制链接

扫一扫