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

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. c++ 加载资源文件

    int _tmain(int argc, _TCHAR* argv[]) { HRSRC hRsrc = FindResource(NULL, MAKEINTRESOURCE(IDR_DATA1), ...

  2. SpringCloud:(一)服务注册与发现

    最近跟着方志明老师学习SpringCloud,博客地址如下: https://blog.csdn.net/forezp/article/details/81040925 自己也跟着撸了一遍,纸上得来终 ...

  3. pycharm2018.2安装

    1.官网下载安装包 https://www.jetbrains.com/pycharm/download/#section=windows (下载2018.2版本,进行破解) 2.参考其他博主安装破解 ...

  4. 初学node.js-nodejs中实现用户注册路由

    经过前面几次的学习,已经可以做下小功能,今天要实现的事用户注册路由. 一.users_model.js  功能:定义用户对象模型 var mongoose=require('mongoose'), S ...

  5. 应用安全 - Java Web 应用 - Confluence - 漏洞汇总

    CVE-2019-3395 Date: -- 类型: SSRF 影响范围: Confluence 1.*.*.*.*.3.*.*.4.*.*.5.*.* Confluence 6.0.*.1.*.6. ...

  6. spring boot 异常汇总

    spring boot JPA 异常: org.springframework.data.mapping.PropertyReferenceException: No property role fo ...

  7. [19/06/03-星期一] HTML基础_C/S与B/S的区别&标题标签(h1-h6)、段落标签(p)

    一.C/S与B/S的区别 C/S(Client/Server):客户端/服务器 1)一般使用的软件都是C/S架构,比如QQ.360.office365: 2)C表示客户端,用户通过客户端来使用软件:S ...

  8. 洛谷P2507 [SCOI2008]配对 题解（dp+贪心）

    洛谷P2507 [SCOI2008]配对 题解(dp+贪心) 标签:题解 阅读体验:https://zybuluo.com/Junlier/note/1299251 链接题目地址:洛谷P2507 [S ...

  9. yii日志保存机制

    一.修改yii框架的配置文件(main.php) 'log' => array( 'class' => 'CLogRouter', 'routes' => array( array( ...

  10. Find The Multiple （水题）

    Given a positive integer n, write a program to find out a nonzero multiple m of n whose decimal repr ...