web实现太极八卦图旋转动画定位角度坐标htmlcssJavaScriptanimation
Posted 牧碼人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web实现太极八卦图旋转动画定位角度坐标htmlcssJavaScriptanimation相关的知识，希望对你有一定的参考价值。
文章目录
前言
哈哈
1、html部分
<div class="great_ultimate_eight_diagrams_box">
<div class="eight_diagrams_box">
<div class="eight_diagrams">
<div class="eight_diagrams_item">
<div class="yin_yang">
<div class="divinatory_direction_box">
<div class="divinatory_name">天乾</div>
<div class="direction">正南</div>
</div>
<div class="yy_box">
<div class="yy_t">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1; background-color: #333;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_m">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1; background-color: #333;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_b">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1; background-color: #333;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
</div>
</div>
</div>
<div class="eight_diagrams_item">
<div class="yin_yang">
<div class="divinatory_direction_box">
<div class="divinatory_name">风巽</div>
<div class="direction">西南</div>
</div>
<div class="yy_box">
<div class="yy_t">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1; background-color: #333;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_m">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1; background-color: #333;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_b">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
</div>
</div>
</div>
<div class="eight_diagrams_item">
<div class="yin_yang">
<div class="divinatory_direction_box">
<div class="divinatory_name">水坎</div>
<div class="direction">正西</div>
</div>
<div class="yy_box">
<div class="yy_t">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_m">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1; background-color: #333;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_b">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
</div>
</div>
</div>
<div class="eight_diagrams_item">
<div class="yin_yang">
<div class="divinatory_direction_box">
<div class="divinatory_name">山艮</div>
<div class="direction">西北</div>
</div>
<div class="yy_box">
<div class="yy_t">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1; background-color: #333;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_m">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_b">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
</div>
</div>
</div>
<div class="eight_diagrams_item">
<div class="yin_yang">
<div class="divinatory_direction_box">
<div class="divinatory_name">地坤</div>
<div class="direction">正北</div>
</div>
<div class="yy_box">
<div class="yy_t">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_m">
<div style="flex: 3; background-color: #333;"></div>
<div style="flex: 1;"></div>
<div style="flex: 3; background-color: #333;"></div>
</div>
<div class="yy_b">
<div style="flex: 3; background-color: #333;"></div>以上是关于web实现太极八卦图旋转动画定位角度坐标htmlcssJavaScriptanimation的主要内容，如果未能解决你的问题，请参考以下文章
web实现太极图背景色线性渐变旋转动画htmlcssafterbeforelineargradienttransformrotateanimation