请问，CSS3中怎样能让一个方框变成圆形之后，再以圆形的样子向前滚动
展开全部
<!DOCTYPE html>
<html>
<head>
<style>
div
{
position: absolute;
width:100px;
height:100px;
border-radius: 50%;
background:red;
animation:myfirst 5s;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
-moz-animation:myfirst 10s; /* Firefox */
-webkit-animation:myfirst 10s; /* Safari and Chrome */
-o-animation:myfirst 10s; /* Opera */
}
@keyframes myfirst
{
from {left:0;transform:rotate(0deg);}
to {left:1000px;transform:rotate(360deg);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {left:0;transform:rotate(0deg);}
to {left:1000px;transform:rotate(360deg);}
}
</style>
</head>
<body style="position: relative;">
<div></div>
</body>
</html>
<html>
<head>
<style>
div
{
position: absolute;
width:100px;
height:100px;
border-radius: 50%;
background:red;
animation:myfirst 5s;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
-moz-animation:myfirst 10s; /* Firefox */
-webkit-animation:myfirst 10s; /* Safari and Chrome */
-o-animation:myfirst 10s; /* Opera */
}
@keyframes myfirst
{
from {left:0;transform:rotate(0deg);}
to {left:1000px;transform:rotate(360deg);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {left:0;transform:rotate(0deg);}
to {left:1000px;transform:rotate(360deg);}
}
</style>
</head>
<body style="position: relative;">
<div></div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
