三角形圍繞正方形旋轉 -开发者知识库

三角形圍繞正方形旋轉 -开发者知识库,第1张

這是對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

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复