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

 

  1. <html>
  2.     <head>
  3.         <title>taiji</title>
  4.         <style>
  5.             body{
  6.                 background-color: antiquewhite;
  7.             }
  8.             .box-taiji{
  9.                 z-index: 0;
  10.                 width: 0;
  11.                 height: 300px;
  12.                 position: relative;
  13.                 margin: 50px auto;
  14.                 border-left: 150px solid #000;
  15.                 border-right: 150px solid #fff;
  16.                 border-radius: 150px;
  17.                 -webkit-transition-property: -webkit-transform;
  18.                 -webkit-transition-duration: 1s;
  19.                 -moz-transition-property: -moz-transform;
  20.                 -moz-transition-duration: 1s;
  21.                 -webkit-animation: rotate 3s linear infinite;
  22.                 -moz-animation: rotate 3s linear infinite;
  23.                 -o-animation: rotate 3s linear infinite;
  24.                 animation: rotate 3s linear infinite;
  25.             }
  26.             @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
  27.                 to{-webkit-transform: rotate(360deg)}
  28.             }
  29.             @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
  30.                 to{-moz-transform: rotate(359deg)}
  31.             }
  32.             @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
  33.                 to{-o-transform: rotate(359deg)}
  34.             }
  35.             @keyframes rotate{from{transform: rotate(0deg)}
  36.                 to{transform: rotate(359deg)}
  37.             }
  38.             .box-taiji::after{
  39.                 z-index: 1;
  40.                 width: 150px;
  41.                 height: 150px;
  42.                 position: absolute;
  43.                 top: 0;
  44.                 left: -80px;
  45.                 content: '';
  46.                 display: block;
  47.                 background:#000;
  48.                 border-radius: 75px;
  49.                 box-shadow: 0 150px 0 #fff;
  50.             }
  51.             .box-taiji::before{
  52.                 content:'';
  53.                 position: absolute;
  54.                 display: block;
  55.                 width:50px;
  56.                 height:50px;
  57.                 left: -30px;
  58.                 top: 45px;
  59.                 z-index:2;
  60.                 background-color:#fff;
  61.                 border-radius:50%;
  62.                 box-shadow:0 150px 0 #000;
  63.             }
  64.         </style>
  65.     </head>
  66.     <body>
  67.         <div class="box-taiji">
  68.         </div>
  69.     </body>
  70. </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. Linux中实用的命令

    1. 查看linux机器是32位还是64位的方法: 1.file  /sbin/init 或者file  /bin/ls           (注意命令中的空格) /sbin/init: ELF64- ...

  2. Laravel 最佳实践

    单一职责原则 一个类和一个方法应该只有一个责任. 例如: public function getFullNameAttribute() { if (auth()->user() &&am ...

  3. docker服务端与客户端通信方式

    docker的服务端与客户端间可以通过unix.tcp方式进行通信.但默认情况下,服务端只监听本地unix接口/var/run/docker.sock,所以客户端只能在服务端所在的机器上使用该unix ...

  4. easyui datagrid 合并相同行

    $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () ...

  5. WPF 位图处理相关类

    位图的存储方式 开始之前,先了解下位图的存储方式 位图的像素都分配有特定的位置和颜色值.每个像素的颜色信息由RGB组合或者灰度值表示,根据位深度,可将位图分为1.4.8.16.24及32位图像等.每个 ...

  6. Eclipse中项目本身没有问题，可是工程名却有红色小叉叉解决办法

    右击项目“Properties”,在弹出的“Properties”的左侧边框,单击“Project Facets”,打开“Project Facets”页面, 在页面中“Java”下拉选项中,选择与自 ...

  7. Linux学习(一)-安装vm虚拟机以及如何在虚拟机上安装Centos系统

    (一)基本说明 学习Linux需要一个环境,我们需要创建一个虚拟机,然后在虚拟机上安装一个Centos系统来学习. 1)安装软件vm12; 2)通过vm12创建一个虚拟机空间; 3)在vm12创建好的 ...

  8. Python-memcached的使用用法

    Memcached API set(key,val,time=0,min_compress_len=0) 无条件键值对的设置,其中的time用于设置超时,单位是秒,而min_compress_len则 ...

  9. 关于iReport5.6.0无法正常启动或者闪退或者JDK8不兼容的解决方案

    参考网址: https://blog.csdn.net/erlian1992/article/details/76359191?locationNum=6&fps=1 说白了 ,即 jaspe ...

  10. 9.EL表达式 和 JSTL核心标签库

    EL表达式 1./*获取数据*/ (某个web域中的对象,访问javabean的属性.访问List集合.访问Map集合.访问数组) <html> <head> <titl ...