草庐IT

web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation

素码人 2023-04-04 原文

文章目录

前言

哈哈

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>
                                <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>
                                <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;"></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;"></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>
        </div>

        <!-- 太极 -->
        <div class="great_ultimate_box">
            <div class="great_ultimate"></div>
        </div>
    </div>

☺☺☺☺☺☺☺

关于html结构未做优化，望谅解！不过微信小程的代码已经优化好，有需要的伙伴可以私聊。对于页面结构就不做过多阐述，多看几下就明白了咋回事了。

2、css部分

.great_ultimate_eight_diagrams_box {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: circularRotation linear infinite 30s;
}

/* 八卦 */
.eight_diagrams_box {
    position: relative;
}

.eight_diagrams {
    width: 410px;
    height: 410px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eight_diagrams_item {
    width: 100px;
    position: absolute;
}

.yin_yang {
    width: 100%;
    height: 100%;
    text-align: center;
}

.divinatory_name {
    /* 文字两端对齐 */
    text-align-last: justify;
    font-size: 20px;
    font-weight: 700;
    padding: 0 20px;
}

.direction {
    margin-top: 2px;
    text-align-last: justify;
    padding: 0 10px;
}

.yy_box {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.yy_t,
.yy_m,
.yy_b {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
}

.yy_m {
    margin-top: 8px;
}

.yy_b {
    margin-top: 8px;
}

.yy_t div,
.yy_m div,
.yy_b div {
    width: 100%;
    height: 8px;
}

/* 太极 */
.great_ultimate_box {
    position: absolute;
}

.great_ultimate {
    width: 270px;
    height: 270px;
    border-radius: 50%;
    /* 圆球上半部分为白色，下半部分为黑色 */
    background: linear-gradient(to bottom,
            #ffffff 0%,
            #ffffff 50%,
            #000000 50%,
            #000000 100%);
    position: relative;
    transform: rotate(-90deg);
}

.great_ultimate::before {
    position: absolute;
    content: "";
    width: 45.5px;
    height: 45.5px;
    border-radius: 50%;
    border: 45px solid #000000;
    /* 左侧黑球套白点  */
    background-color: #FFFFFF;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.great_ultimate::after {
    position: absolute;
    content: "";
    width: 45.5px;
    height: 45.5px;
    border-radius: 50%;
    border: 45px solid #FFFFFF;
    /* 右侧白球套黑点 */
    background-color: #000000;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes circularRotation {
    form {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

☺☺☺☺☺☺☺

八卦图主要就是使用定位，通过JavaScript计算每一个div的坐标，然后定位到指定位置即可。关于太极图可查看本篇文章了解详情。

3、JavaScript部分

function init() {
    let elItem = document.querySelectorAll('.eight_diagrams_item'),
        yin_yang = document.querySelectorAll('.yin_yang'),
        radius = document.querySelector('.eight_diagrams').clientWidth / 2,
        itemLen = elItem.length,
        pieceDeg = 360 / itemLen;

    for (let i = 0; i < itemLen; i++) {
        let t = i * pieceDeg,
            x = undefined,
            y = undefined;

        yin_yang[i].style.transform = `rotate(${t}deg)`;

        t = (Math.PI / 180) * t;
        x = Math.sin(t) * radius;
        y = -Math.cos(t) * radius;

        elItem[i].style.transform = `translate(${x}px, ${y}px)`;
    }
}

init();

☺☺☺☺☺☺

定义名为init的函数，用来设置旋转元素的坐标。
通过querySelectorAll获取一个元素类数组。
通过querySelector和clientWidth获取外层容器的宽度并除以2得到半径。
通过querySelectorAll获取内层元素的类数组，并使用yin_yang变量保存。
定义itemLen变量保存类数组长度。
通过类数组长度计算元素角度的平均值，并保存到pieceDeg变量中。
使用for循环计算出每个元素的x和y坐标，i * pieceDeg得到角度值；(Math.PI / 180) * t得到弧度值，因为编程中的sin和cos需要通过弧度才能计算出坐标值。

yin_yang[i].style.transform = 'rotate(' + t + 'deg)';
elItem[i].style.transform = 'translate(' + x + 'px', y + 'px)';
第一句代码设置元素的旋转角度；第二句话设置元素的坐标位置。以上两句话可以有更好的方式实现，但是在这里暂时不优化。

4、微信小程序演示

八卦图转动spanclasstoken前端$javascript$html5$css3

有关web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  8. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  9. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  10. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

随机推荐