用MFC做一个旋转的太极图

发布网友发布时间：2022-04-06 10:53

共5个回答

懂视网时间：2022-04-06 15:15

这是一个中国人都非常熟悉的图案——太极图，它分为阴阳两级，会旋转（用到css3 animation动画属性），此图通过css3纯代码实现，它由若干个小圆组合而成，适合初学css3的人练练手，娱以致学，增加学习的乐趣。

HTML部分：

<div class="square">
 <div class="rect rect_one">
 <div class="inner_circle rect_one_one">
 <div class="dot rect_one_two"></div>
 </div>
 </div>
 <div class="rect rect_two">
 <div class="inner_circle rect_two_one">
 <div class="dot rect_two_two"></div>
 </div>
 </div>
 </div>
 <div style="text-align:center;clear:both">
 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
 <script src="/follow.js" type="text/javascript"></script>
 </div>

CSS部分：

<style>
 .square {
 width: 400px;
 height: 400px;
 position: relative;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 animation: rotate infinite linear 5s;
 margin: 10% auto;
 -webkit-animation: rotate infinite linear 5s;
 margin: 10% auto;
 -moz-animation: rotate infinite linear 5s;
 margin: 10% auto;
 }
 .rect {
 width: 400px;
 height: 200px;
 position: relative;
 border: 1px #d2d2d2 solid;
 border-bottom: none;
 } 
 .inner_circle {
 width: 200px;
 height: 200px;
 border-radius: 200px;
 position: absolute;
 z-index: 1;
 } 
 .dot {
 width: 50px;
 height: 50px;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 border-radius: 50%;
 } 
 .rect_one {
 border-radius: 200px 200px 0 0;
 background: white;
 } 
 .rect_one_one {
 bottom: -100px;
 left: 0;
 background: black;
 } 
 .rect_one_two {
 background: white;
 } 
 .rect_two {
 border-radius: 0 0 200px 200px;
 background: black;
 } 
 .rect_two_one {
 bottom: 100px;
 right: 0;
 background: white;
 }
 .rect_two_two {
 background: black;
 } 
 @keyframes rotate {
 from {
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 }
 }
 </style>

看图看效果：

太极图.jpg

热心网友时间：2022-04-06 12:23

资料或源码没有。但是你要实现用图形显示有没有住人应该不难啊。从前台的入住和退房登记记录中就可以判断是否有人住，然后用不同颜色的图标表示出来将就可以了。至于具体要怎么实现还是要看你

热心网友时间：2022-04-06 13:41

加载位图旋转吧，不过还是有点工作量，最简单的方式就是用flash来做动画旋转，然后用vc加载swf就行追问感觉老师的意图应该不是这么个做法因为是课程设计

热心网友时间：2022-04-06 15:15

那估计是要你在HBITMAP，用矩阵来扭曲了吧。。。扭曲完了双缓冲贴图吧。。。我没试过，猜的。

热心网友时间：2022-04-06 17:07

难度有点高...等高手出现！

用MFC做一个 旋转的 太极图

用MFC做一个旋转的太极图