首页 技术·教程

👩‍🚀 旋转小人

admin/254811227110010.gif

sidebar.php

找到主题sidebar.php,路径/usr/themes/Cuteen/base/sidebar.php在那儿加具体看图,当然懂的自然懂!

admin/2f8fb1228121946.png

代码

<div class="sidebar-box classListBox twopeople  position-relative">
    <div class="container" style="height:200px;">
        <canvas class="illo" width="800" height="800" style="max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;"></canvas>
    </div>
    <script src="https://ku.gitcc.cn/cdn/js/twopeople1.js"></script>
    <script src="https://ku.gitcc.cn/cdn/js/zdog.dist.js"></script>
    <script id="rendered-js" src="https://ku.gitcc.cn/cdn/js/twopeople.js"></script>
</div>

自定义css

/*旋转小人*/
.twopeople{
    margin: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 1rem;
}
canvas {
    display: block;
    margin: 0 auto;
    cursor: move;
}

效果请看右边!


成功了请留言哦!


js库由腾讯cdn提供加速服务。另外js库是我自己的,需要就请引用,但是别搞,你懂!




文章评论

    Janexia 访客ChromeWindows
    2021-02-9 11:10   回复

    已添加,不错哦

    小妖 访客ChromeWindows
    2020-12-28 16:28   回复

    已添加 效果很不错

      乔治 站长ChromeWindows
      2020-12-28 16:52   回复

      嘻嘻

目录