太极图可以理解为一个一半黑一半白的半圆，上面放置着两个圆形，一个黑色边框白色芯，一个白色边框黑色芯。

1、实现黑白各半的圆形。

    .box{

        width:200px;height:200px; border-radius:50%;

        background:linear-gradient(90deg,black 50%,white 50%);

        margin:50px auto;position:relative;

    }

 2、用：before伪类实现一个黑色边框白色芯的园。

.box:before{

        content:" ";

        position:absolute;

        width:0px;height:0px;

        padding:25px;

        border:25px solid black;

        border-radius: 50%;

        background:white;

        left:50px;

    }

3、用：after伪类实现一个白色边框黑色芯的圆。

.box:after{

        content:" ";

        width:0px;height:0px;

        padding:25px;

        border:25px solid white;

        border-radius: 50%;

        background:black;

        position: absolute;

        left:50px;top:100px;

    }

CSS实现旋转太极图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>太极图</title>

    <style>

    *{

        margin:0;padding:0;

    }

    body{

        background: #eee

    }

    .box{

        width:200px;height:200px;

        border-radius:50%;

        background: linear-gradient(90deg,black 50%,white 50%);

        margin:50px auto;

        position:relative;

        animation: tj 3s infinite linear ;}

        .box:before{

        content:" ";

        position:absolute;

        width:0px;

        height:0px;

        padding:25px;

        border:25px solid black;

        border-radius: 50%;

        background:white;

        left:50px;

    }

    .box:after{

        content:" ";

        width:0px;height:0px;

        padding:25px;

        border:25px solid white;

        border-radius: 50%;

        background:black;

        position: absolute;

        left:50px;top:100px;

    }

    @keyframes tj{

        from {transform:rotate(0deg);}

        to{transform:rotate(360deg);}

    }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

JS实现旋转太极图（鼠标悬停转动，移开停止旋转效果）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>太极图</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

    body{

        background: #eee

    }

    .tjt{

        width:200px;height:200px;

        border-radius:50%;

        background: linear-gradient(90deg,black 50%,white 50%);

        margin:50px auto;

        position:relative;

    }

        .tjt:before{

        content:" ";

        position:absolute;

        width:0px;

        height:0px;

        padding:25px;

        border:25px solid black;

        border-radius: 50%;

        background:white;

        left:50px;

    }

   .tjt:after{

        content:" ";

        width:0px;height:0px;

        padding:25px;

        border:25px solid white;

        border-radius: 50%;

        background:black;

        position: absolute;

        left:50px;top:100px;

    }

    </style>

</head>

<body>

    <div id="tj" class="tjt" onmouseover="xz()" onmouseout="clearInterval(zh)"></div>

<script>

    var x=0;

    var zh;

    function xz(){

                        clearInterval(zh)

        zh=setInterval(function(){

        x=x+1;

        document.getElementById("tj").style.transform='rotate(' + x + 'deg)';

    },10)

}

</script>

</body>

</html>

CSS3制作太极图以及用JS实现旋转太极图的更多相关文章

  1. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  2. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  4. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

  5. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

  6. 基于CSS3伪元素和动画绘制旋转太极图

    通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...

  7. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  8. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  9. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

随机推荐

  1. 源特定组播（SSM：Source Specific Multicast）

    源特定组播(SSM:Source Specific Multicast)是一种区别于传统组播的新的业务模型,它使用组播组地址和组播源地址同时来标识一个组播会话,而不是向传统的组播服务那样只使用组播组地 ...

  2. 基于webstorm卡顿问题的2种解决方法

    基于webstorm卡顿问题的2种解决方法:https://www.jb51.net/article/128441.htm

  3. springboot 整合 tobato 的 fastdfs 实现文件上传和下载

    添加项目所需要的依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  4. Tomcat&Servlet笔记

    # 今日内容     1. web相关概念回顾     2. web服务器软件:Tomcat     3. Servlet入门学习 ## web相关概念回顾     1. 软件架构         1 ...

  5. 牛客练习赛51 C 勾股定理

    链接:https://ac.nowcoder.com/acm/contest/1083/C 题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角三角形. 输 ...

  6. AFNetworking2.0源码解析<四>

    结构 AFURLResponseSerialization负责解析网络返回数据,检查数据是否合法,把NSData数据转成相应的对象,内置的转换器有json,xml,plist,image,用户可以很方 ...

  7. python2和3的一些区别，编码方式

    python2与python3的区别: #python2 print() print'abc' #range() xrange()生成器 #raw_input()#python3 #print('ab ...

  8. 将Docker主机数据挂在到容器中

    dcoker 提供三种不同的方式将数据从宿主机挂载到容器中:volumes,bind mounts, tmpfs.volumes: Docker管理宿主机文件系统的一部分(/var/lib/docke ...

  9. 大数据数据库HBase（二）——搭建与JavaAPI

    一.搭建 1.选择一台没有ZK的机器(HBase自带ZK,可能会导致冲突) 2.选择版本2.0.5的HBase 3.解压HBase2.0.5 4.配置HBase的HBASE_HOME和path 5.修 ...

  10. MySQL安装+更换yum源+mysql密码忘记（2019更新）

    安装mysql步骤:1.yum install mysql-server -y2.service mysqld start3.mysql4.切换数据库 use mysql 查看表 show table ...