今天我们学习了小球颜色的变换是怎么实现的以及形状的变换：
<!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>关卡7</title>
</head>
<style>
#bigbox
{
height: 300px;
width: 700px;
background-color: #08ECD9;
margin: auto auto;
}
#box1
{position: relative;
height: 100px;
width:100px;
border-radius: 80%;
background-color: #E06D6D;
top:75px;
animation: move;
animation-duration: 3s; /*完成动画的时间*/
animation-direction: alternate;/*设置动画是可以倒过来来回播放的*/
animation-iteration-count: 4;/*设置动画的来回播放次数，一来一回count计数为2*/
}
@keyframes move
{
0%{
transform:translate(0px,0px);
}
50%
{
transform:translate(300px,0px);
background-color: #E06D6D;
border-radius: 0%;
}
100%
{
transform:translate(600px,0px);
background-color: #ecd507;
}
}
</style>
<body>
<div id="bigbox">
<div id="box1"></div>
</div>
</body>
</html>
扫一扫
2820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
