zoukankan      html  css  js  c++  java
  • 太极旋转-JS实现

      刚学了js的一些函数,所以做了一个太极的旋转。做完之后是上面这个样子的,是可以旋转的。

      思路:

      1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动。

      2.画两个半圆,主要属性是border-top-right-radius: 250px; 像素值为长边的一半。

      3.然后画4个圆,以基准转盘为父元素,按照下面黑色圆一样的思路再画另外一边白色的圆,最后再在两个中等的圆上画两个小圆。

      4.设置定时器:

    //旋转角度
    var deg = 0
    
    //设置定时器,100毫秒动一次
    var tid = setInterval(function(){
        var clock_dfc = document.getElementById("clock-dfc");
    
        clock_dfc.style.transform = "rotate("+(-deg)+"deg)"; //改变转盘属性
        deg -=30;//每次赚30度
    },100);

      5.小结:就是简单的CSS叠加出来的效果。

       代码分享:http://download.csdn.net/detail/qq_15259489/9705046

  • 相关阅读:
    gulp编译sass
    Material Design学习
    js爬虫心得
    js爬虫
    angularjs
    sass心得
    矩阵与线性代数学习笔记
    2-SAT学习笔记
    一个有趣的题目【二分答案,2-SAT,线段树优化】
    vijos训练之——星辰大海中闪烁的趣题
  • 原文地址:https://www.cnblogs.com/hxliang/p/6143368.html
Copyright © 2011-2022 走看看