css动画——2D效果

最新推荐文章于 2024-04-08 12:20:40 发布

Start_t

最新推荐文章于 2024-04-08 12:20:40 发布

阅读量590

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Start_t/article/details/104477083

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css动画——2D效果

一、动画过渡transition
二、2D转换transform
三、渐变

2D transform 方法
函数	描述
matrix(n,n,n,n,n,n)	定义2D转换，使用六个值的矩阵
translate(x,y)	定义2D转换，沿着X和Y轴移动
translateX(n)	定义2D转换，沿着X轴移动
translateY(n)	定义2D转换，沿着Y轴移动
scale(n,y)	定义2D缩放转换，改变元素的宽度和高度
scaleX(n)	定义2D缩放转换，改变元素的宽度
scaleY(n)	定义2D缩放转换，改变元素的高度
rotate(angle)	定义2D旋转，在参数中规定角度
skew(x-angle,y-angle)	定义2D倾斜转换，沿着X轴和Y轴
skewX(angle)	定义2D倾斜转换，沿着X轴
skewY(angle)	定义2D倾斜转换，沿着Y轴

一、动画过渡transition

transition：2s linear all（变化完需要的时间，变化速度，延迟时间）

定义过度属性（跟数值变化有关的才能写）

transition-property：all 或属性名，属性名

定义过度时间

transition-duration：2s transition：2s 2s（过度时间，延迟时间）

延迟多少时间开始

transition-delay：2s

过度的变化速度

transition-timing-function：
- linear 匀速
- ease 慢快慢
- ease-in 慢开始
- ease-out 慢结束
- ease-in-out 慢开始慢结束
- cubic-bezier 自定义（贝兹尔曲线）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画过度</title>
<style>
	div{width:100px;height:100px;background:#f99;margin-bottom:20px;}
	
	#d1{transition: 5s linear 3s;}
	#d2{transition: 5s ease all;}
	#d3{transition: 5s ease-in all;}
	#d4{transition: 5s ease-out all;}
	#d5{transition: 5s ease-in-out all;}
	#d6{transition: 5s cubic-bezier(.4, 1.9, .4, .5) all;}

	//div:hover{width:300px;}

</style>
</head>
<body>
	<div id="d1">linear</div>
	<div id="d2">ease</div>
	<div id="d3">ease-in</div>
	<div id="d4">ease-out</div>
	<div id="d5">ease-in-out</div>
	<div id="d6">cubic-bezier</div>
</body>

<script>
	setTimeout(function(){
	var oDiv=document.getElementsByTagName("div");
	for(var i=0;i<oDiv.length;i++){
		oDiv[i].style.width="300px";
	}
	},1000);
</script>
</html>

二、2D转换transform

注：2D转换加上transition: .5 linear效果更佳
正常： transform:rotate(15deg) scale(0.5,0.5) 顺时针旋转15度，水平垂直缩小二分之一

translate（）移动

通过translate（），元素从其当前位置移动，根据给定的left（x坐标）和top（y坐标）位置参考
transform:translate(20px.20px) X轴和Y轴各移动20px

rotate（）旋转

通过rotate（）方法，元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转
transform:rotate(15deg) 顺时针旋转15度，不支持ie8

scale（）缩放

通过scale（）方法，元素的尺寸会增加或减少，根据给定的宽度（x轴）和高度（y轴）参数
transform:scale(2,1) 水平放大两倍，垂直放大一倍
transform:scale(.5,.5) 水平垂直缩小二分之一

skew（）倾斜

通过skew（）方法，元素倾斜给定的角度，根据给定的水平线（x轴）和垂直线（y轴）参数
transform:skew(15deg,15deg) x轴和y轴倾斜15度

matrix（）合体写法（矩阵）

matrix（）方法把所以2D转换方法组合在一起，一般需要六个参数，包含属性函数，允许：旋转、缩放、移动以及倾斜元素
缩放X，tan（X度），tan（Y度），缩放Y，位置X，位置Y
transform:matrix(1.2,1,0,1,10,10)

三、渐变

线性渐变linear-gradient（方向[可选]，颜色1，颜色2）

//css
	div{width:200px;height:200px;margin-bottom:20px;}
	#d1{
	background: -webkit-linear-gradient(top,#f00,#00f);
	background: -moz-linear-gradient(top,#f00,#00f);
	}
	#d2{
	background: -webkit-linear-gradient(left, #f00 50%, #00f);	
	background: -moz-linear-gradient(left, #f00 50%, #00f);
	}
	#d3{
	background: -webkit-linear-gradient(top, #f00, #00f,#ff0);
	background: -moz-linear-gradient(top, #f00,#f80,#ff0,#0f0,#0ff,#00f,#f0f);
	}
//body
	<div id="d1"></div>
	<div id="d2"></div>
	<div id="d3"></div>

在这里插入图片描述

就是一个方向到另一个方向笔直进行渐变

径向渐变radial-gradient（正圆椭圆[可选]，颜色1，颜色2）

从起点到终点颜色从内到外进行圆形渐变
circle：渐变为最大的圆形
ellipse：（椭圆）根据元素形状渐变，元素为正方形是显示效果，与circle无意

//css
	div{width:200px;height:200px;margin-bottom:20px;}
	#d4{width:400px;
	background: -webkit-radial-gradient(circle, #f00, #00f);
	background: -moz-radial-gradient(circle at 0% 0%, #f00, #00f);
	}
	#d5{width:400px;
	background: -webkit-radial-gradient(ellipse, #f00, #00f);
	background: -moz-radial-gradient(ellipse at 0% 0%, #f00, #00f);
	}
//body
	<div id="d4"></div>
	<div id="d5"></div>

在这里插入图片描述

重复渐变repeating-radial-gradient

会按照规律一层一层循环

//css
	#d6{
	background: -webkit-repeating-radial-gradient(circle, #f00 10%, #f70 11%,#ff0 12% ,#0f0 13% ,#0ff 14%,#00f 15%,#f0f 16%);
	background: -moz-repeating-radial-gradient(circle, #f00 10%, #f70 11%,#ff0 12% ,#0f0 13% ,#0ff 14%,#00f 15%,#f0f 16%);
	}
	#d7{
	background: -webkit-repeating-linear-gradient(left, #f00 10%, #f70 11%,#ff0 12% ,#0f0 13% ,#0ff 14%,#00f 15%,#f0f 16%);
	background: -moz-repeating-linear-gradient(left, #f00 10%, #f70 11%,#ff0 12% ,#0f0 13% ,#0ff 14%,#00f 15%,#f0f 16%);
	}
//body
	<div id="d6"></div>
	<div id="d7"></div>