CSS3动画中怎么一边移动一边旋转？
发布网友
共3个回答
热心网友
你的代码里面只有位置移动的top,left。没有写旋转的代码。
在动画帧时加入rotate(角度)就可以旋转并移动，可以参考下面代码。
相关示例如下：
<style>.ani{animation:box 1s linear 0s infinite;width:100px;height:100px;background:green;border-radius:50%;}
@keyframes box{0% {transform:rotate(0deg)translate(0,0);}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0);}75%{transform:rotate(270deg);}100% {transform:rotate(360deg)translate(0,0);}}
</style>
<div class="ani"></div>
CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
热心网友
你在这里面也没设置让他旋转的代码,肯定不会旋转的
就是这句：-webkit-transform:rotate(720deg) scale(2,2);
@keyframes mylasting1
{
0%{top:550px; -webkit-transform:rotate(10deg) scale(2,2); transform:rotate(720deg) scale(2,2);}
25%{top:250px;left:100px; -webkit-transform:rotate(80deg) scale(2,2); transform:rotate(720deg) scale(2,2);}
50%{top:150px;left:50px; -webkit-transform:rotate(160deg) scale(2,2); transform:rotate(720deg) scale(2,2);}
100%{top:0px;left:0px; -webkit-transform:rotate(320deg) scale(2,2); transform:rotate(720deg) scale(2,2);}
}
@-webkit-keyframes mylasting1
{
0%{top:550px; -webkit-transform:rotate(10deg) scale(2,2);}
25%{top:250px;left:100px; -webkit-transform:rotate(80deg) scale(2,2);}
50%{top:150px;left:50px; -webkit-transform:rotate(160deg) scale(2,2);}
100%{top:0px;left:0px; -webkit-transform:rotate(320deg) scale(2,2);}
}
热心网友
@keyframes mylasting1
{
0%{top:550px;}
25%{top:250px;left:100px;}
50%{top:150px;left:50px;}
100%{top:0px;left:0px;transform:rotate(720deg) scale(2,2);}
}
