<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
height: 20px;
width: 40px;
border: 2px solid black;
border-radius: 30%;
background-color: azure;
margin: 100px auto 0 auto;
/* 转变形态transform */
/* 偏移translate */
transform: translateY(0px);
/* 旋转rotate */
/* 旋转中心点origin */
transform: rotate(0deg);
/* 倾斜skew */
transform: skewY(0deg);
/* 放大缩小scale */
/* 过度效果transition */
/* 由慢到快ease-in */
/* 由快到慢ease-out */
/* 先加速再减速ease-in-out */
transition: background-color 3s;
}
.a:hover {
transform: scale(5);
background-color: red;
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
动漫效果
最新推荐文章于 2021-11-27 20:33:02 发布