刚学了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

太极旋转-JS实现的更多相关文章

  1. wap版和pc版的旋转js

    <script type="text/javascript"> var evt = "onorientationchange" in window ...

  2. 图片旋转js代码

    function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.fi ...

  3. 用javascirpt画个太极

    偶然看到用代码画太极,感觉很有趣,用JS写了一个 过程很简单,画了张图,应该一看就懂了 代码也很简单,如下,注释很多 function TaiJi(r,canvas){ this.r = r; thi ...

  4. 最流行的Node.js应用开发框架简介

    最流行的Node.js应用开发框架简介 快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.j ...

  5. 当今最流行的Node.js应用开发框架简介

    快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非 ...

  6. html5 jqueryrotate插件实现旋转动画

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  7. h5屏幕旋转的时间和样式的设置

    好几天没更新博客了,今天写写小感悟和一个小东西吧! 随着前端的前端的越来越火,对前端的要求也越来越高,从之前的切图到开发网站再到现在移动端开发,微信开发,手机app混合开发,不得不说现在前端在开发行业 ...

  8. [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

    目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...

  9. 太极图HTML+CSS(可旋转)代码记录

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. October 31st Week 45th Monday 2016

    While there is life there is hope. 一息若存,希望不灭. Go on living even if there is no hope. Knowing is not ...

  2. OutofMemory之PermGen介绍

    可参考:https://my.oschina.net/benhaile/blog/214159.

  3. 【笔记】js操作cookie

    $.cookie('the_cookie'); // 读取 cookie            $.cookie('the_cookie', 'the_value', { expires: 7 }); ...

  4. Conditional project or library reference in Visual Studio

    Conditional project or library reference in Visual Studio In case you were wondering why you haven’t ...

  5. 把office文档转换为html过程中的一些坑

    之前和我们项目的团队一起酝酿了一个项目,公司的业务文档技术文档比较多,但都比较分散,虽然通过FTP或其他方式聚合起来了,但感觉还是不够方便. 另外公司每次都来新员工,新员工都需要一些培训,比较耗时,比 ...

  6. vmware 中ubuntu客户机 安装vmware tool vmhgfs 共享文件夹失败处理

    vmware版本:10.0.0 build-1295980 ubuntu版本:3.13.0-62-generic 先安装的vmware workstation自带光盘中vmare tools包,安装完 ...

  7. git学习(四):撤销修改和撤销删除

    修改有两种情况 在工作区修改但没有add到暂存区 git checkout -- <file> 在工作区修改了也add到暂存区 git reset HEAD <file> 先撤 ...

  8. Good Bye 2016

    A - New Year and Hurry (water) #include <bits/stdc++.h> using namespace std; int main() { ]; ; ...

  9. [资料分享]组件方式开发 Web App全站

  10. Codeforces CF#628 Education 8 B. New Skateboard

    B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard in ...