简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - css或者js 能不能做出点绕圆心旋转的效果？
巴扎黑
巴扎黑 2017-04-11 11:40:48
0
3
576

就是类似一个点绕圆心旋转那种，比如地球绕着太阳转。思路是什么？有木有demo或者例子啊，搜索半天没有结果。

巴扎黑
巴扎黑

Antworte allen(3)
伊谢尔伦
伊谢尔伦2017-04-11 11:42:48 3 Etage

https://codepen.io/kowlor/pen/ZYYQoy

Wie +0
Antwort hinzufügen
大家讲道理
大家讲道理2017-04-11 11:42:48 2 Etage

demo就不写了，提供个CSS3的思路吧：
html定义三个元素如右，<p class="canvas"><p class="sun"></p><p class="earth"></p></p>；用css将.canvas渲染为一个透明正方形，将.sun渲染为黄色圆形（其实是圆角方形），定位在.canvas的中央,将.earth渲染为蓝色圆形，置于.canvas的任意为中心位置，给.canvas增加一个css旋转的animation，循环次数为infinite，就算完成了；
以上提到的css属性的写法都不难，在手册上或者搜索引擎中都能很容易找到，题主可以尝试一下。
以上html元素使用svg替代更好，如果你有兴趣的话。

然后，js就更方便了，可以用js操作普通元素，也可以操作svg元素，还可以直接用canvas画布，并且可以直接使用js自带的三角函数计算坐标来控制旋转的个体，而不用像上面那样旋转画布来取巧，这样便可以添加多个旋转速率和圆心不同天体，封装成几个类的话，轻松绘制简易太阳系也没有问题。

Wie +0
Antwort hinzufügen
Ty80
Ty802017-04-11 11:42:48 1 Etage 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS3自动旋转效果</title>
        <style>
          .swiper-container{
            width:100%;
            margin:300px auto;
            position:relative;
          }
          .swip_center_img{
            -moz-animation:rotate 20s infinite linear;
            -webkit-animation:rotate 20s infinite linear;
            animation:rotate 20s infinite linear;
            position:absolute;
            left:50%;
            top:50%;
          }
          .center_img{
            background:rgba(120,220,210,.7);
          }
          .swip_img_radius{
            padding:10px;
            width:100px;
            height:100px;
            border-radius:50%;
            box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
            -moz-transition:all .5s;
            -webkit-transition:all .5s;
            transition:all .5s;
          }
          @-moz-keyframes rotate{
            0%{
              -moz-transform:rotate(0deg);
             }
             100%{
               -moz-transform:rotate(360deg);
             }
          }
          @-webkit-keyframes rotate{
            0%{
              -webkit-transform:rotate(0deg);
             }
             100%{
               -webkit-transform:rotate(360deg);
             }
          }
          @keyframes rotate{
            0%{
              transform:rotate(0deg);
             }
             100%{
               transform:rotate(360deg);
             }
          }
          .translate_right_top{
            background:rgba(23,43,45,.7);
            -moz-transform:translate(140px,-140px);
            -webkit-transform:translate(140px,-140px);
            transform:translate(140px,-140px);
          }
          .translate_right{
            background:rgba(123,43,45,.7);
            -moz-transform:translate(170px);
            -webkit-transform:translate(170px);
            transform:translate(170px);
          }
          .translate_right_bottom{
            background:rgba(123,73,55,.7);
            -moz-transform:translate(140px,140px);
            -webkit-transform:translate(140px,140px);
            transform:translate(140px,140px);
          }
          .translate_bottom{
            background:rgba(53,173,55,.7);
            -moz-transform:translate(0,170px);
            -webkit-transform:translate(0,170px);
            transform:translate(0,170px);
          }
          .translate_left_bottom{
            background:rgba(53,173,155,.7);
            -moz-transform:translate(-140px,140px);
            -webkit-transform:translate(-140px,140px);
            transform:translate(-140px,140px);
          }
          .translate_left{
            background:rgba(153,173,55,.7);
            -moz-transform:translate(-170px);
            -webkit-transform:translate(-170px);
            transform:translate(-170px);
          }
          .translate_left_top{
            background:rgba(53,273,55,.7);
            -moz-transform:translate(-140px,-140px);
            -webkit-transform:translate(-140px,-140px);
            transform:translate(-140px,-140px);
          }
          .translate_top{
             background:rgba(53,173,255,.7);
            -moz-transform:translate(0,-170px);
            -webkit-transform:translate(0,-170px);
            transform:translate(0,-170px);
          }
        </style>
  </head>
  <body>
      <header class="swiper-container">
        <p class="swip_center_img">
          <p class="swip_img_radius center_img"></p>
        </p>
        <p class="swip_center_img">
          <p class="swip_img_radius translate_right_top"></p>
        </p>
        <p class="swip_center_img">
          <p class="swip_img_radius translate_right"></p>
        </p>
        <p class="swip_center_img">
          <p class="swip_img_radius translate_right_bottom"></p>
        </p>
        <p class="swip_center_img">
          <p class="swip_img_radius translate_bottom"></p>
        </p>
        <p class="swip_center_img">
          <p class="swip_img_radius translate_left_bottom"></p>
        </p>
        <p class="swip_center_img">
          <p class="swip_img_radius translate_left"></p>
        </p>
        <p class="swip_center_img">
          <p class="swip_img_radius translate_left_top"></p>
        </p>
        <p class="swip_center_img">
          <p class="swip_img_radius translate_top"></p>
        </p>
      </header>
  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $(".swiper-container").css("height",$(window).height());
      });
    </script>
  </body>
</html>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！