这是对css3动画的应用,首先利用@keyframes创建动画,再绑定到某一个选择器上。
html代码:
<!DOCTYPE html>
<html>
<head>
<title>三角形围绕正方形旋转/title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<div id="triangle"></div>
<div id="squre"></div>
</body>
</html>
css代码:
*{
margin:0px;
padding: 0px;
}
#triangle{
width: 0px;
height: 0px;
position: relative;
border-bottom: 24px solid;
border-left: 15px solid transparent;/*透明*/
border-right: 15px solid transparent;
border-bottom-color: red;
animation: myfirst 5s;
animation-iteration-count: infinite;
left: 20px;
top: 26px;
}
@keyframes myfirst{
0% {border-bottom-color:red; left:20px; top:26px;}
25% {border-bottom-color:black; left:250px; top:26px;}
50% {border-bottom-color:blue; left:250px; top:250px;}
75% {border-bottom-color:green; left:20px; top:250px;}
100% {border-bottom-color:red; left:20px; top:26px;}
}
#squre{
width: 200px;
height: 200px;
background-color: green;
position: relative;
left: 50px;
top: 26px;
}
动画效果:https://urbetsy.github.io/20180427/ex.html