10、CSS3的过渡效果(transition)

jasmine_qiqi

已于 2022-04-06 09:12:36 修改

阅读量383

点赞数 1

分类专栏： CSS 文章标签：前端 css html

于 2022-04-05 15:13:07 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123969613

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1、`transition`属性

transition(过渡)	属性、秒数、函数、延迟
属性	`transition-property`
秒数	`transition-duration`
函数	`transition-timing-function`
延迟	`transition-delay`
设置旋转点(x,y)	`transform-origin`

2、`transition-timing-function`函数属性

transition-timing-function	函数属性值
`ease`	开始和结束慢，中间快。默认值
`linear`	匀速
`ease-in`	开始慢
`ease-out`	结束慢
`ease-in-out`	和ease类似，但比ease幅度大

3、实例（旋转放大）

3.1、效果【视频】：https://live.csdn.net/v/195468
3.2、源代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/* 
		1、transition(过渡):属性、秒数、函数、延迟
		属性：transition-property
		秒数：transition-duration
		函数：transition-timing-function
		延迟：transition-delay
		设置旋转点(x,y):transform-origin

		2、函数属性值：
		ease:开始和结束慢，中间快。默认值
		linear:匀速
		ease-in:开始慢
		ease-out:结束慢
		ease-in-out:和ease类似，但比ease幅度大


		*/
		.box {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			margin: 100px auto;
			transition: transform 1s;
			/*  多个样式:用逗号隔开  */
			/* transition: transform 1s, width 1s, height 1s; */
		}

		/* 旋转360度，放大一倍 */
		.box:hover {
			transform: rotate(360deg) scale(2);
			/* width: 200px;
			height: 200px; */

		}
	</style>
</head>

<body>
	<div class="box">Hello world!</div>
</body>

</html>

jasmine_qiqi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
10、CSS3的过渡效果(transition)

1、transition属性transition(过渡)属性、秒数、函数、延迟属性transition-property秒数transition-duration函数transition-timing-function延迟transition-delay设置旋转点(x,y)transform-origin2、transition-timing-function函数属性transition-timing-function函数属性值
复制链接

扫一扫