CSS3动画无限次执行

原创 1205017237 随笔 THML/CSS 284阅读 2018-01-02 14:38:39 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
@-webkit-keyframes gogogo {
0%{

    -webkit-transform: rotate(0deg);
   border:5px solid red;

}
50%{
    -webkit-transform: rotate(180deg);
    background:black;
   border:5px solid yellow;
}
100%{
    -webkit-transform: rotate(360deg);
    background:white;
   border:5px solid red;
}

}

.loading{
border:5px solid black;
border-radius:40px;
width: 28px;
height: 188px;
-webkit-animation:gogogo 2s infinite linear ;
margin:100px;

}
</style>
<body>
<div class="loading"></div>
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复