<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style>
#animate{
width:100px;
height:100px;
margin:100px auto;
border-left:10px solid #c93f2f;
border-right:10px solid #61c557;
border-top:10px solid #5679bc;
border-bottom:10px solid #f88c06;
animation: change 5s infinite;
}
@keyframes change {
0%{
border-radius: 0;
transform: rotate(0deg);
}
25%{
transform: rotate(180deg);
}
50%{
border-radius: 50%;
transform: rotate(360deg);
}
75%{
transform: rotate(180deg);
}
100%{
border-radius: 0;
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div id="animate"></div>
</body>
</html>
文章标题
最新推荐文章于 2022-10-30 12:21:08 发布