64 lines
1.2 KiB
HTML
64 lines
1.2 KiB
HTML
<!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>
|
|
|
|
/* 鼠标悬浮改变效果 */
|
|
.one:hover {
|
|
color: red;
|
|
}
|
|
|
|
|
|
/* 平滑过渡（由一种状态到另一种状态） */
|
|
.two {
|
|
width: 200px;
|
|
transition: all ease 1s ;
|
|
}
|
|
|
|
/* 聚焦 */
|
|
.two:focus {
|
|
width: 500px;
|
|
}
|
|
|
|
|
|
|
|
.far{
|
|
display: flex;
|
|
height: 200px;
|
|
width: 200px;
|
|
border: 1px solid;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- <div class="one">
|
|
<p>hahahaha</p>
|
|
</div>
|
|
<input class="two" type="text" placeholder="输入">
|
|
<input class="three" type="text" placeholder="输入">
|
|
<input class="four" type="text" placeholder="输入"> -->
|
|
|
|
<div class="far">
|
|
|
|
<span>1</span>
|
|
<p>2</p>
|
|
<div>3</div>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |