当前位置: 首页 > 前端笔记 > CSS > CSS3绘制运动的八卦图形-貌似比canvas简单、流畅
2014年15八月

CSS3绘制运动的八卦图形-貌似比canvas简单、流畅

最近几天都在研究CSS3和Canvas动画,最少在使用上和理解上CSS3动画完爆Canvas动画。这次又是八卦,CSS3明显流畅,结构也非常明了。本来是不想画八卦了,想画个金字塔,貌似只有Opera支持透视属性。就放弃,虽然看起来很酷的样子。刚好昨天写了个Canvas绘制八卦图形,并让八卦动起来,可以2相对比下。最开心的就是那条白色的线没有了。

画八卦的原理就不说了,可以看:Canvas绘制八卦图形,并让八卦动起来,老规矩上代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3绘制运动的八卦图形-貌似比canvas简单、流畅</title>
<style>
#video { width:800px; height:450px; margin:100px auto; border:10px #000000 solid; background:#3b3b3b; }
#trigram { /*画一个半径是183px的白色的圆*/
width:366px; 
height:366px; 
margin:45px auto; 
position:relative;
background:#ffffff;
border-radius:183px;
animation:run 1.8s linear infinite; /*“run”动感的名称和下面的 @keyframes run 对应 “1.8s”是完成这个动画一个周期需要的时间 “linear”是动画的速度曲线 “infinite” 动画的播放次数时无限循环*/
}
#trigram-1 { /*画一个半径是183px的黑色的半圆*/
width:180px; 
height:360px;
background:#222222;
border-radius:180px 0 0 180px;
position:absolute;
left:3px;
top:3px;
}
#trigram-2 { /*画一个半径是93px的白色的圆*/ 
width:180px; 
height:180px;
background:#ffffff;
border-radius:180px;
position:absolute;
left:93px;
top:3px;
}
#trigram-3 { /*画一个半径是93px的黑色的圆*/ 
width:180px; 
height:180px;
background:#222222;
border-radius:180px;
position:absolute;
left:93px;
top:183px;
}
#trigram-4 { /*画一个半径是16px的黑色的圆*/ 
width:32px; 
height:32px;
background:#222222;
border-radius:16px;
position:absolute;
left:165px;
top:75px;
}
#trigram-5 { /*画一个半径是93px的白色的圆*/ 
width:32px; 
height:32px;
background:#ffffff;
border-radius:16px;
position:absolute;
left:165px;
top:255px;
}
@keyframes run { /*运动的方法 这里貌似要理解transform 3D的x,y,z的关系和运动方式*/
form { /*起点*/
transform:rotateZ(0deg); 
} 
to { /*终点*/
transform:rotateZ(360deg);
}
}
</style>
</head>

<body>
<div id="video">
	<div id="trigram">
		<div id="trigram-1"></div>
		<div id="trigram-2"></div>
		<div id="trigram-3"></div>
		<div id="trigram-4"></div>
		<div id="trigram-5"></div>
	</div>
</div>
</body>
</html>

在线演示地址: CSS3绘制运动的八卦图形-貌似比canvas简单、流畅.html

要理解transform 3D概念,请看这里http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

文章信息

  • 发布日期:2014年08月15日 14:27:24
  • 固定地址:http://www.estorm.cn/notes/css/2014-08-15/css3-trigram.html