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

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. Oracle11g数据文件DBF迁移

    最近接手了一个以前同事遗留下来的项目,时机比较敏感,因为要召开11届全国少数名族运动会.建国70周年,以及香港暴乱,其中网站上挂载有十几个系统的入口链接,不巧的是其中一个系统存在若口令,被公安部安全局 ...

  2. 【RequestContext】关于RequestContext的一些小心得

    版权声明:随意转载,注明出处 https://blog.csdn.net/River_Continent/article/details/77511389后台传参,一直是一个比较重要的地方,如果涉及W ...

  3. 工作中经常用到 github 上优秀、实用、轻量级、无依赖的插件和库

    原文收录在 GitHub博客 ( https://github.com/jawil/blog ) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 由于gith ...

  4. PHP 数组函数 内部指针

    current( &$arr ) 每个数组的当前单元,初始值的 数组的第一个单元next ( &$arr ) 返回数组中的下一个单元 , 如果没值则返回falshprev ( & ...

  5. 应用安全 - 无文件式攻击 - 潜伏型攻击 - WMI - 汇总

    wbemtest.exe Windows XP Windows 10

  6. 浅谈html5在vr中的应用

    使用过HTML5制作动画过程的开发者都知道,HTML5页面给人一种逼真的感觉,同时HTML也是可以制作VR页面,但是需要你熟练HTML5与JavaScript开发过程,所以在有必要的情况下,我们可以用 ...

  7. angular5 给元素添加自定义属性

    今天尝试给一个a 标签添加一个自定义属性,用于存放相关数据,但是angular templates 编译不通过. <a href="javascript:void(0);" ...

  8. 【Linux 源码】Linux源码比较重要的目录

    (1)arch arch是architecture的缩写.内核所支持的每一种CPU体系,该目录下都有对应的子目录. 每个CPU的子目录,又进一步分解为boot.mm.kernel等子目录,分别包含控制 ...

  9. windows上安装 包管理工具choco及scoop

    1.安装 choco: 1.1.使用管理员方式打开 PowerShell 1.2.输入 Set-ExecutionPolicy RemoteSigned,输入 Y 1.3.安装 choco输入:iwr ...

  10. Windows 运行时加载动态库

    下面是一个运行时加载nvcuda.dll,并检测当前驱动版本最大支持的CUDA版本的例子. #include "cuda.h" #include <stdio.h> # ...