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

 

<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. ARC081E. Don't Be a Subsequence

    $\newcommand{\dp}{\mathsf{dp}}$ $\newcommand{\next}{\mathsf{next}}$ Let $S$ be a string of lower cas ...

  2. HDU 1325 有根树的判断

    Is It A Tree? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...

  3. MySql 8.0.11 客户端连接失败：2059 - Authentication plugin 'caching_sha2_password' cannot be loaded: ....

    近期,换了新笔记本,重新安装了MySql数据库和客户端工具Navicat Premium 12.我是从官网上下载的MySql数据库,版本为8.0.11,链接:https://dev.mysql.com ...

  4. 守护服务Supervisor的安装和使用

    Supervisor(http://supervisord.org/)是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具,不支持Windows系统 ...

  5. [JZOJ3521]道路覆盖--状压DP

    题目链接 略略略 分析 首先一看到使得最低的高度最高就想到了二分,于是就转化成了一个是否可行的问题 发现这个\(k\)都很小,考虑使用状态压缩DP 但是我一开始发现似乎并不好设计状态...如果这个\( ...

  6. Linux I2C核心、总线和设备驱动

    目录 更新记录 一.Linux I2C 体系结构 1.1 Linux I2C 体系结构的组成部分 1.2 内核源码文件 1.3 重要的数据结构 二.Linux I2C 核心 2.1 流程 2.2 主要 ...

  7. 统一用户认证系统CUAS实现要点

    背景: 基于目前存在多套员工使用的日常工作子系统,现状为各系统各自有一套用户体系,员工需要记住各系统的用户名.密码等信息,还需要登录多个系统,重复工作量颇多.统一用户认证组件将用户名.密码等信息统一存 ...

  8. VBA基本用法

    Visual Basic for Applications 宏语言 打开VB编辑器 首先打开Excel,组合键Alt+F11 加载宏 找到相应的宏,点击"执行" 举例 Sub 评分 ...

  9. 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  10. python笔记：学习设置Python虚拟环境+配置 virtualenvwarpper+创建Python3.6的虚拟环境+安装numpy

    虚拟环境它是一个虚拟化,从电脑独立开辟出来的环境.就是借助虚拟机docker来把一部分内容独立出来,我们把这部分独立出来的东西称作“容器”,在这个容器中,我们可以只安装我们需要的依赖包,各个容器之间互 ...