CSS3动画无限次执行实例-原创手记-慕课网

首页课程实战体系课手记专栏慕课教程

CSS3动画无限次执行实例

极地星 2017-02-06 14:18:25 浏览 4385

极地星

关注TA

手记 6

粉丝 0

获赞 13

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