这个伪元素的位置对齐还妹搞明白 需要再研究研究

 

<html>

    <head>

        <title>taiji</title>

        <style>

            body{

                background-color: antiquewhite;

            }

            .box-taiji{

                z-index: 0;

                width: 0;

                height: 300px;

                position: relative;

                margin: 50px auto;

                border-left: 150px solid #000;

                border-right: 150px solid #fff;

                border-radius: 150px;

                -webkit-transition-property: -webkit-transform;

                -webkit-transition-duration: 1s;

                -moz-transition-property: -moz-transform;

                -moz-transition-duration: 1s;

                -webkit-animation: rotate 3s linear infinite;

                -moz-animation: rotate 3s linear infinite;

                -o-animation: rotate 3s linear infinite;

                animation: rotate 3s linear infinite;

            }

            @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}

                to{-webkit-transform: rotate(360deg)}

            }

            @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}

                to{-moz-transform: rotate(359deg)}

            }

            @-o-keyframes rotate{from{-o-transform: rotate(0deg)}

                to{-o-transform: rotate(359deg)}

            }

            @keyframes rotate{from{transform: rotate(0deg)}

                to{transform: rotate(359deg)}

            }

            .box-taiji::after{

                z-index: 1;

                width: 150px;

                height: 150px;

                position: absolute;

                top: 0;

                left: -80px;

                content: '';

                display: block;

                background:#000;

                border-radius: 75px;

                box-shadow: 0 150px 0 #fff;

            }

            .box-taiji::before{

                content:'';

                position: absolute;

                display: block;

                width:50px;

                height:50px;

                left: -30px;

                top: 45px;

                z-index:2;

                background-color:#fff;

                border-radius:50%;

                box-shadow:0 150px 0 #000;

            }

        </style>

    </head>

    <body>

        <div class="box-taiji">

        </div>

    </body>

</html>

CSS实现太极效果的更多相关文章

  1. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  7. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  8. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

随机推荐

  1. 【AtCoder】diverta 2019 Programming Contest

    diverta 2019 Programming Contest 因为评测机的缘故--它unrated了.. A - Consecutive Integers #include <bits/st ...

  2. c# http文件上传

    /// <summary> /// 上传文件的api /// </summary> [HttpPost] public string UploadFile(op_client_ ...

  3. Springboot+mybatis+druid 配置多数据源

    项目结构 application.yml配置文件 spring: application: name: service datasource: primary: jdbc-url: jdbc:orac ...

  4. 关于一些JS的运算符

    首先呢,什么是JavaScript:JavaScript是一种脚本语言,也是一种解释型语言,更是一种由数据值决定变量类型的弱类型语言 JavaScript主要由三部分组成 ECMAScript  这个 ...

  5. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  6. 如何查找SAP Fiori launchpad Designer的准确路径即url地址

    比如我们知道在SPRO里下面这个路径的customizing activity里打开Fiori Launchpad designer: SAP Netweaver->UI technologie ...

  7. VirtualBox虚拟CentOS7共享文件夹

    在VirtualBox的centos虚拟机光盘设置为安装增强工具包VBoxGuestAdditions.iso 进入centos, cd /media mkdir cdrom mount -t iso ...

  8. safari同步google书签

    1 直接通过safari的导入书签,from chrome就可以了

  9. Django—views系统：views基础

    Django的View(视图)简介 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错 ...

  10. Cacti-0.8.8b详细安装及配置步骤

    1.  Cacti环境安装 1.1         安装LAMP环境 安装LAMP环境,当然,如果你有兴趣可以采用编译,我线上Mysql是编译的,其余是yum安装的.在这次实验采用yum安装. 关闭i ...