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

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. Flask框架（五） —— session源码分析

    Flask框架(五) —— session源码分析 目录 session源码分析 1.请求来了,执行__call__方法 2.__call__方法 3.调用__call__方法 3.1.ctx = s ...

  2. ant buid.xml 模板

    <?xml version="1.0" encoding="UTF-8"?> <project name="ant" de ...

  3. 【7.10校内test】T1高级打字机

    [题目链接luogu] 这是T1,但是是神仙T1: 对于前100%的数据很好写,直接数组模拟就可以了: (当然也有栈模拟的,据说有模拟炸了的) //50pts#include<bits/stdc ...

  4. mac下安装php zookeeper扩展

    安装步骤 php-zookeeper依赖libzookeeper,所以需要先安装libzookeeper 安装libzookeeper cd /usr/local/src/ wget http://m ...

  5. 小白学Python（19）： Pyinstaller 生成 exe 文件

    python 默认并不包含 PyInstaller 模块,因此需要自行安装 PyInstaller 模块. 安装 PyInstaller 模块与安装其他 Python 模块一样,使用 pip 命令安装 ...

  6. HDUSTOJ-1559 Vive la Difference!(简单题)

    1559: Vive la Difference! 时间限制: 3 Sec  内存限制: 128 MB提交: 18  解决: 14[提交][状态][讨论版] 题目描述 Take any four po ...

  7. 基于gulp的前端自动化方案

    前言 ​ 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好 ...

  8. SpringMVC源码解析

    一:springmvc运行过程: 1. dispatcherServlet 通过 HandlerMapping 找到controller2. controller经过后台逻辑处理得到结果集modela ...

  9. C#选择文件返回缩略图

    传入文件路径,返回临时文件中缩略图的路径,jpg,pdf,office,rar都行 string path = ThumbnailHelper.GetInstance().GetJPGThumbnai ...

  10. [IIS]修改MaxFieldLength与MaxRequestBytes彻底解决Request Too Long的问题

    当 IIS7/7.5 收到的请求头的长度超过16K(默认值),就会引发"Bad Request - Request Too Long. HTTP Error 400. The size of ...