三角形围绕正方形旋转

时间：2021-02-05 08:42:16

这是对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

标签：

相关文章