请问,CSS3中怎样能让一个方框变成圆形之后,再以圆形的样子向前滚动

发布网友发布时间：2022-04-06 11:12

共1个回答

热心网友时间：2022-04-06 12:41

<!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>