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

 

<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. Python【条件判断】

    单向判断ifif xxx: #冒号 #条件 print(xxx) #缩进是四个空格或一个Tab键#被缩进的内容(print()函数)和if条件语句组成了一个代码块(一个整体)————————————— ...

  2. linux 安装telnet

    一.CentOS下查看系统是否已安装telnet rpm -qa | grep telnet telnet 是挂在 xinetd 底下的,所以同时查看是否安装了xinetd服务 rpm -qa | g ...

  3. python入门pk小游戏

    import time import random flag = True while flag: player_win = 0 enemy_win = 0 for i in range(1, 4): ...

  4. css文本超出隐藏 显示三个点

    文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...

  5. .NET webapi 的单元测试

    public abstract class MirAPIUnitTestCommon { public abstract string GetBaseAddress(); /// <summar ...

  6. WinPE基础知识之重定位表

    typedef struct _IMAGE_BASE_RELOCATION { DWORD VirtualAddress; // (重要)需要重定位的位置,这是一个RVA DWORD SizeOfBl ...

  7. ASE19团队项目alpha阶段model组 scrum11 记录

    本次会议于11月15日,19时整在微软北京西二号楼sky garden召开,持续5分钟. 与会人员:Jiyan He, Kun Yan, Lei Chai, Linfeng Qi, Xueqing W ...

  8. lua table vs closure

    最近在重构自己写的框架中的定时器模块,需要把回调函数保存起来,大概如下: function timer_mgr:save_timer( this,callback ) return { this = ...

  9. 程序员和IT员不能错过的网站

    前言本文收录一些值得收藏的开发相关网站. 目录一.搜索引擎二.在线课程三.在线练习四.在线工具箱五.在线编译器六.技术论坛或社区七.音乐放松一下 一.搜索引擎搜索引擎大家最熟悉不过,本没有必要列出,但 ...

  10. idea启动卡死，项目界面一直processing

    1 原因 因为上次退出项目,非正常退出,导致索引生成有问题. 2 解决办法 删除项目根目录下 .idea文件夹,然后重新打开,重新indexing生成索引文件