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

 

<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. Kubernetes---Pod hook

    Pod hook(钩子)是由Kubernetes管理的kubelet发起的,当容器中的进程启动前或者容器中的进程终止之前运行,这是包含在容器的生命周期之中.可以同时为Pod中的所有容器都配置 hook ...

  2. 高深的dp POJ 2229Sumsets

    对于这个问题, 我们显然可以看出来, 当他是奇数的时候, 直接等于他的前一个偶数 dp [ i ] = dp [ i - 1] ; 那么问题, 当它是偶数的时候, 我们应该怎么进行 dp 记忆化搜索并 ...

  3. 正则表达式BREs,EREs,PREs的比较

    目录 正则表达式BREs,EREs,PREs的比较 正则表达式分类: Linux 中常用文本工具与正则表达式的关系 grep , egrep 正则表达式特点: sed 正则表达式特点 Awk(gawk ...

  4. MySQL反应慢排查思路

    数据库异常假死排查需要数据(当时问题的时间,前后时间在2个小时的数据就行) 1.MySQL相关配置 整体可以借助于pt-mysql-summary生成(percona-tools工具) 2.操作系统方 ...

  5. 【第一季】CH05_FPGA设计Verilog基础（二）Enter a post title

    [第一季]CH05_FPGA设计Verilog基础(二) 5.1状态机设计 状态机是许多数字系统的核心部件,是一类重要的时序逻辑电路.通常包括三个部分:一是下一个状态的逻辑电路,二是存储状态机当前状态 ...

  6. [Tarjan系列] Tarjan算法求无向图的双连通分量

    这篇介绍如何用Tarjan算法求Double Connected Component,即双连通分量. 双联通分量包括点双连通分量v-DCC和边连通分量e-DCC. 若一张无向连通图不存在割点,则称它为 ...

  7. 调研task_struct结构体

    进程的描述PCB task_struct——PCB的一种,在linux中描述进程的结构体叫做task_struct. task_struct内容分类: 标识符:描述本进程的唯一标识符,用来区别其他进程 ...

  8. shake.js实现微信摇一摇功能

    项目要求实现点击摇一摇图片,图片摇一摇,并且摇一摇手机,图片也要摇一摇. 关于用js怎样实现摇一摇手机图片摇一摇,我在网络上找了一些方法,真正有用的是shake.js. 接下来,上shake.js源码 ...

  9. 使用jMeter构造大量并发的随机HTTP请求

    在前一篇文章使用jMeter构造大量并发HTTP请求进行微服务性能测试里,我介绍了如何用jMeter构造并发HTTP请求.但是通过文中介绍的方式构造的并发请求,其请求参数都是硬编码的'Wang'. 有 ...

  10. 【uoj#46】 [清华集训2014] 玄学

      题目传送门:uoj46   题意简述:要求在序列上维护一个操作间支持结合律的区间操作,查询连续一段时间内的操作对单点的作用效果,\(n \leq 10^5,m \leq 6 \times 10^5 ...