css3动画学习之 transform
程序员文章站
2024-03-25 14:30:46
...
css3动画学习之 transform
预览地址 点击预览
属性说明
transform 旋转的角度 0-180
scale 放大的比例
例子 transform: rotate(60deg) scale(1.5); //旋转60°，放大1.5倍
代码，直接可运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画旋转</title>
</head>
<body>
<div class="test1"></div>
</body>
<style>
.test1{
width: 120px;
height: 120px;
background: salmon;
animation-name: dh;
animation-iteration-count: infinite;
animation-duration:4.5s;
position: absolute;
top: 70%;
left: 10%;
animation-direction: alternate;
}
@keyframes dh{
0%{
background: salmon;
top: 65%;
left: 18%;
transform: rotate(0deg) scale(1.0);
}
20%{
background: orangered;
top: 60%;
left: 25%;
transform: rotate(60deg) scale(1.3);
border-radius: 10%;
}
40%{
background: gold;
top: 55%;
left: 35%;
transform: rotate(120deg) scale(1.6);
border-radius: 20%;
}
60%{
background: forestgreen;
top: 50%;
left: 44%;
transform: rotate(180deg) scale(1.4);
border-radius: 30%;
}
80%{
background: slateblue;
top: 44%;
left: 50%;
transform: rotate(260deg) scale(1.2);
border-radius: 20%;
}
100%{
background: burlywood;
top: 39%;
left: 65%;
transform: rotate(360deg) scale(1.0);
border-radius: 10%;
}
}
</style>
</html>