我们可以使用css实现2d转换，使网页页面实现动画效果，下面介绍的是几个常用的2d转换属性；
注意：在这里我们使用div标签的移动来实现2d转换。先上代码，在讲解。
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#wa{
margin: auto;
margin-top: 50px;
width: 1000px;
height: 500px;
background-color:darkgreen;
position: relative;
}
#two{
width:200px;
height:200px;
margin-top: 100px;
border-radius: 50%;
border:black 2px solid;
background-color:blueviolet;
animation-name: remove;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
position: absolute;
top: 50px;
left: 0;
}
@keyframes remove{
0%{
transform: translate(0px,0px);
}
50%{
transform:translate(400px,0);
border-radius: 0;
background-color:burlywood;
}
100%{
transform: translate(800px,0);
border-radius: 50%;
background-color: blueviolet;
}
}
</style>
<body>
<div id="wa">
<div id="two"></div>
</div>
</body>
</html>
其中关键代码：
animation-name: remove; //设置动画事件的名字
animation-duration: 5s; //设置执行动画的时间
animation-iteration-count: infinite; //设置循环次数
animation-direction: alternate; // 往返方向
@keyframes remove{}：用来设置动画不同运行程度的状态。
translform：translate（x,y） 指定的原宿沿x或y方向上移动多少像素。
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
