2021-04-06

最新推荐文章于 2024-09-14 17:59:56 发布

北路有点堵车*

最新推荐文章于 2024-09-14 17:59:56 发布

阅读量58

点赞数

分类专栏：学习笔记笔记文章标签： css

本文链接：https://blog.csdn.net/d13368568386/article/details/115455271

版权

学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

笔记

19 篇文章 0 订阅

订阅专栏

这篇博客探讨了CSS中的高级样式技巧，重点介绍了`transition`和`transform`属性。通过示例代码展示了如何使用`transition`实现元素背景颜色的平滑过渡，以及利用`transform`进行元素的位置和大小变换。读者将了解到如何创建动态效果，提升网页交互体验。

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

css高级样式

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

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