93 lines
2.1 KiB
HTML
93 lines
2.1 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>
|
||
input {
|
||
width: 250px;
|
||
transition: all 2s cubic-bezier(0.7, -0.25, 0.84, 1.58);
|
||
}
|
||
|
||
input:hover {
|
||
width: 400px;
|
||
}
|
||
|
||
@keyframes an {
|
||
from {
|
||
width: 200px;
|
||
height: 200px;
|
||
background: red;
|
||
}
|
||
|
||
to {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: blue;
|
||
}
|
||
}
|
||
|
||
/* .box {
|
||
width: 200px;
|
||
height: 200px;
|
||
animation: an 3s ease ;
|
||
} */
|
||
|
||
.box1 {
|
||
width: 100px;
|
||
height: 75px;
|
||
background: red;
|
||
border: 1px solid black;
|
||
transform: translateY(200px);
|
||
/* {x,y轴平移} */
|
||
}
|
||
|
||
.box2 {
|
||
width: 100px;
|
||
height: 75px;
|
||
background: red;
|
||
border: 1px solid black;
|
||
transform: rotateX(10deg);
|
||
/* {正数顺时针旋转，单位deg} */
|
||
}
|
||
|
||
.box3 {
|
||
width: 100px;
|
||
height: 75px;
|
||
background: red;
|
||
border: 1px solid black;
|
||
transform: scale(3, 1);
|
||
/* {让元素放大缩小x,y} */
|
||
}
|
||
|
||
.box4 {
|
||
width: 100px;
|
||
height: 100px;
|
||
background: red;
|
||
border: 1px solid black;
|
||
transform: skew(100deg,0);
|
||
}
|
||
/* {斜切x,y} */
|
||
|
||
/* matrix()6个参数，包括旋转，缩放，移动（平移）和斜切 */
|
||
/* rotate: ();沿中心轴旋转 rotateX: ();沿X轴旋转 rotateY:():沿Y轴旋转 */
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
|
||
<input type="text" placeholder="输入密码">
|
||
|
||
<div class="box"></div>
|
||
<div class="box1"></div>
|
||
<div class="box2"></div>
|
||
<div class="box3"></div>
|
||
<div class="box4"></div>
|
||
</body>
|
||
|
||
</html> |