课堂笔记4月6

最新推荐文章于 2022-08-29 22:36:46 发布

蒸汽秋葵y

最新推荐文章于 2022-08-29 22:36:46 发布

阅读量53

点赞数

本文链接：https://blog.csdn.net/y850266/article/details/115455362

版权

本文介绍了CSS中的过渡（transition）和转换（transform）属性，包括如何设置过渡时间和速度曲线，以及转换中的位移方法。示例代码展示了如何在鼠标悬停时实现元素颜色和大小的平滑变化，以及元素位置的动态移动。这些技术常用于创建响应式和动态用户界面。

摘要由CSDN通过智能技术生成

transition:过渡
transition:过渡属性过渡花费的时间
鼠标悬停伪类
transition:width 5s,background-color 5s;
all:全部/所有的
速度:ease 慢–快--慢
linear:匀速
ease-in:低速开始
ease-out低速结束
ease-in-out:
transform:转换
translatex(x):水平方向位移
translatey(y):垂直方向位移
translate(x,y):水平方向位移x,垂直方向位移y

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css高级样式</title>
		<style>
			.box{
				width:200px;
				height:200px;
				background-color:skyblue;
				/* transition:过渡 */
				/* transition:过渡属性 过渡花费的时间 */
				transition:background-color 4s;
			}
			/* 鼠标悬停伪类 */
			.box:hover{
				background-color:blue;
			}
			.box1{
				width:200px;
				height:200px;
				background-color:red;
				/* transition:width 5s,background-color 5s; */
				/* all:全部/所有的 */
				transition:all 5s ease-in-out 3s;
				/* 速度:ease 慢--快--慢 */
				/* linear:匀速 */
				/* ease-in:低速开始 */
				/* ease-out低速结束 */
				/* ease-in-out: */
			}
			.box1:hover{
				width:800px;
				background-color:pink;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box1"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
		<style>
			.box1{
				width:200px;
				height:200px;
				background-color:pink;
				transition:all 8s linear;
			}
			.box1:hover{
				/* transform:转换 */
				/* translatex(x):水平方向位移
				translatey(y):垂直方向位移
				translate(x,y):水平方向位移x,垂直方向位移y */
				transform:translate(800px,800px);
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>