transitions动画

最新推荐文章于 2021-12-17 17:19:20 发布

太阳的后裔

最新推荐文章于 2021-12-17 17:19:20 发布

阅读量150

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43942765/article/details/104356368

版权

CSS 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>transitions动画</title>
		<style type="text/css">
			body {
				background-color: #f0f3f9;
			}

			.trans_box {
				padding: 20px;
			}

			.trans_list {
				width: 5%;
				height: 64px;
				margin: 10px 0;
				background-color: #486AAA;
				color: #fff;
				text-align: center;
			}

			div.test {
				width: 100px;
				height: 100px;
				background: red;
				transition: all 4s ease;
			}

			div.test:hover {
				width: 300px;
				height: 300px;
				transition: all 4s ease;
			}

			.trans_box:hover .trans_list {
				margin-left: 89%;
				background-color: #0000ff;
				color: #000;
				border-radius: 25px;
				transform: rotate(360deg);
			}

			.ease{
				transition: all 4s ease;
			}
			
			.ease_in{
				transition: all 4s ease-in;
			}
			
			.ease_out{
				transition: all 4s ease-out;
			}
			
			.ease_in_out{
				transition: all 4s ease-in-out;
			}
			
			.linear{
				transition: all 4s linear;
			}
			
			.cubic-bezier{
				transition: all 4s cubic-bezier(0.42,0,0.58,1);
			}
		</style>
	</head>
	<body>
		<h3>transitions动画</h3>
		<div class="test"></div>
		<div id="transBox" class="trans_box">
			<div class="trans_list ease">ease</div>
			<div class="trans_list ease_in">ease-in</div>
			<div class="trans_list ease_out">ease-out</div>
			<div class="trans_list ease_in_out">ease-in-out</div>
			<div class="trans_list linear">linear</div>
			<div class="trans_list cubic-bezier">cubic-bezier</div>
		</div>
	</body>
</html>

在这里插入图片描述
ease：动作变化速度先快后慢
ease-in：动作变化速度逐渐变快
ease-out：动作变化速度先快后慢
ease-in-out：动作变化速度先快后慢
linear：动作变化呈匀速
cubic-bezier()：自定义动作变化的速度
附上几张图

在这里插入图片描述

太阳的后裔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transitions动画

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>transitions动画</title> <style type="text/css"> body { background-color: #f0f3f9; }...
复制链接

扫一扫

专栏目录