CSS3动画与变形

最新推荐文章于 2024-04-21 07:19:07 发布

山有木兮木有枝_雅俗共赏

最新推荐文章于 2024-04-21 07:19:07 发布

阅读量317

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_57727027/article/details/123293622

版权

动画–过渡属性 transition-property

-动画–过渡属性 transition-property
	早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。
	但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，
	让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，
	并平滑地以动画效果改变CSS的属性值。

	在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
	第一，在默认样式中声明元素的初始状态样式；
	第二，声明过渡元素最终状态样式，比如悬浮状态；
	第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

	CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

	transition-property:指定过渡或动态模拟的CSS属性
	transition-duration:指定完成过渡所需的时间
	transition-timing-function:指定过渡函数
	transition-delay:指定开始出现的延迟时间

	transition-property属性：
	transition-property指定对THML元素的哪个css属性进行平滑渐变处理，该属性可以指定
	例如background-color,width,height等各种标准的CSS属性。

	特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
	用一个简单的例子来说明这个问题：
	假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性，
	那么all代表的就是“width”、“height”和“background”。
	如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。

08动画–过渡所需时间 transition-duration

-动画–过渡所需时间 transition-duration
	transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，
	也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

09动画–过渡函数 transition-timing-function

动画–过渡函数 transition-timing-function
	transition-timing-function属性指的是过渡的“缓动函数”。
	主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
	ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。
	linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。
	ease-in:动画开始的速度较慢，然后速度加快。
	ease-out:动画开始的速度很快，然后速度减慢。
	ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.

10动画–过渡延迟时间 transition-delay

动画–过渡延迟时间 transition-delay
	transition-delay属性和transition-duration属性极其类似，不同的是transition-duration
	是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，
	也就是说当改变元素属性值后多长时间开始执行。

	有时我们想改变两个或者多个css属性的transition效果时，
	只要把几个transition的声明串在一起，用逗号（“，”）隔开，
	然后各自可以有各自不同的延续时间和其时间的速率变换方式。
	但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

eg：

外链的CSS样式

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 400px;
	height: 400px;
	margin: 100px auto;
	border:2px dotted #906;
}
.wrapper div{
	width:200px;
	height:200px;
	line-height:200px;
	text-align:center;
	font-size:20px;
	color:#fff;
	background-color:#90F;
/*	transition-property:all;
	transition-duration:3s;
	transition-timing-function:linear;
	transition-delay:1s;*/
	transition:all 5s ease-in;
		/*transition:all 1s ease-in .1s;*/
/*	-webkit-transition:all 1s ease-in .1s;
	-moz-transition:all 1s ease-in .1s;*/
}
.wrapper div:hover{
	width:400px;
	height:400px;
	background-color:#F39;
}

视图为：
<body>
	<div class="wrapper">
    	<div><span>请把鼠标放我这儿</span></div>
    </div>
</body>

效果图：
在这里插入图片描述

将鼠标放在紫色区域的某一个地方，图标发生改变。图标的长度，宽度，背景颜色缓慢的发生明显的变化。[展示动画的魅力。]

动画与变形
	<!-- 动画与变形 CSS3主要提供了transform,transition,animation
	这三大属性来实现我们的变形与动画效果。
	transform是CSS3提供的一个变形的属性支持，可以对HTML元素进行常见的几何变换，
	包括旋转，缩放，扭曲，位移4种变换。
	也可以使用矩阵。
	transform:该属性用于设置变形。该属性支持一个或多个变形函数。
	CSS3提供的变形函数：
	rotate(angle):该函数用于设置元素旋转的角度。
	skew():该函数用于设置元素的一个扭曲效果。
	scale(sx,xy):该函数用于设置元素的缩放效果。
	translate(tx,ty):该函数用于设置元素的位移。
	matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵4
	后面的dx,dy主要是指在坐标轴上的一个偏移量。

山有木兮木有枝_雅俗共赏

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画与变形

动画–过渡属性 transition-property-动画–过渡属性 transition-property早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡
复制链接

扫一扫