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

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. Selenium学习之==>Selenium介绍

    前世 Selenium RC 早期的Selenium使用的是JavaScript注入技术与浏览器打交道,需要Selenium RC启动一个Server,将操作Web元素的API调用转化为一段段Java ...

  2. jupyter 服务器安装随笔

    python3:python3 -m pip install --upgrade pip python3 -m pip install jupyterpkg install py36-pyzmq-18 ...

  3. c# 匿名委托递归

    Func<List<int>, int> GetVirtualCode = null; // 递归不能直接=,要赋初值.微软得优化啊,这语法糖不够甜 GetVirtualCod ...

  4. python2.7安装numpy、pandas、matplotlib库

    我装的是python2.7 然后pip的版本是18.1,最近使用pip install **安装包的时候总是会提示 You are using pip version 18.1, however ve ...

  5. Mailx安装与使用

    1.卸载sendmail与postfix yum -y install mailx 2.安装mailx yum -y remove sendmail postfix 3.配置mail.rc vim / ...

  6. springboot+dubbo基于zookeeper快速搭建一个demo

    由于小编是在windows环境下搭建的,故该示例均为在windows下操作,这里只是提供一个快速搭建思路,linux操作也基本上差不多. 首先本示例的dubbo是基于zookeeper发布订阅消息的, ...

  7. [Python3] 042 日志

    目录 LOG 1. 日志相关概念 1.1 日志的级别 level 1.2 LOG 的作用 1.3 日志信息 1.4 成熟的第三方日志 1.5 注意 2. Logging 模块 2.1 日志级别 2.2 ...

  8. [Web 前端] 022 js 的基本数据类型及使用

    1. Javascript 基本数据类型 1.1 分类 类型 释义 boolean 布尔类型,分 true 与 false number 整型,浮点型 string 字符类型 object 对象类型 ...

  9. 【监控笔记】【2.4】SQL Server中的 Ring Buffer 诊断各种系统资源压力情况

    SQL Server 操作系统(SQLOS)负责管理特定于SQL Server的操作系统资源. 其中相关的动态管理试图sys.dm_os_ring_buffers将被标识为仅供参考.不提供支持.不保证 ...

  10. Ubuntu终端路径和文件夹相互切换

    一. 环境配置 1. 打开终端输入安装命令 sudo apt-get install nautilus-open-terminal 2. 重新加载文件管理器 nautilus -q 3. 重启电脑 s ...