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

 

<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. java如何读写json文件

    在实际项目开发中,有时会遇到一些全局的配置缓存,最好的做法是配置redis数据库作为数据缓存,而当未有配置redis服务器时,读取静态资源文件(如xml.json等)也是一种实现方式,但是这有一个弊端 ...

  2. 用bisect来管理已排序的序列

    bisect 模块包含两个主要函数,bisect 和 insort,两个函数都利用二分查找算法来在有序序列中查找或插入元素. 2.8.1 用bisect来搜索 bisect(haystack, nee ...

  3. redis集群搭建及一些问题

    redis 1.简化版redis (本套Redis集群为简化版安装部署,只需解压至普通用户家目录下或者任意目录,解压后修改脚本,执行脚本后即可使用.) 注意,此版本需要在redis配置文件中添加 pr ...

  4. S03_CH02_AXI_DMA PL发送数据到PS

    S03_CH02_AXI_DMA PL发送数据到PS 1.1概述 本课程的设计原理分析. 本课程循序渐进,承接<S03_CH01_AXI_DMA_LOOP 环路测试>这一课程,在DATA ...

  5. 前端工程师应该知道的yarn知识

    yarn 是在工作中离不开的工具,但在工作中,很多人基本只会使用 yarn install,而且会手动删除 node-modules,或删除 yarn.lock 文件等不规范操作.本文将从一些基础的知 ...

  6. LocalDate与Date转化

    // 01. java.util.Date --> java.time.LocalDateTimepublic void UDateToLocalDateTime() { java.util.D ...

  7. 命令行发送SMTP协议邮件（163邮箱）

    这里我们用163邮箱为例子,借助命令行发送smtp邮件 1.连接服务器 在终端上输入:telnet smtp.163.com 25 回车,然后就连接了服务器的25端口,成功会输出 220 163.co ...

  8. layer，备受青睐的web弹层组件

    //http://layer.layui.com/ 特别说明:事件需自己绑定,以下只展现调用代码. //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容' ...

  9. connect() failed (111: Connection refused) while connecting to upstream的解决

    遇到这种情况, 首先 1.检查php-fpm是否启动---------如果没启动->启动, 2.用命令 netstat -ant | grep 9000 查看php-fpm进程,如果没启动-&g ...

  10. Ubuntu18.04安装MySQL与默认编码设置

    安装 打开终端直接开始,编码配置方法在后面 #通过apt更新包索引 sudo apt update #按照默认软件包安装 sudo apt install mysql-server #运行安全脚本 s ...