需求：使用div和伪元素实现阴阳太极图

图例：

代码：

<html>

<head>

    <title>太极图</title>

    <style type="text/css">

    div{

        width: 200px;

        height: 100px;

        background-color: #ffffff;

        border-style: solid;

        border-color: #000;

        border-bottom-width: 100px;

        border-radius: 50%;

        position: relative;

            /*旋转动画*/

        -webkit-animation: animal 4s infinite linear ;

        -webkit-transform-origin: center center;

        -ms-transform-origin: center center;

        transform-origin: center center;

    }

    div::before{

        content: '';

        position: absolute;

        width: 20px;

        height: 20px;

        border: 40px solid #000000;

        top: 50%;

        left: 0;

        border-radius: 50px;

        background: #ffffff;

    }

    div::after{

        content: '';

        position: absolute;

        width: 20px;

        height: 20px;

        border: 40px solid #ffffff;

        top: 50%;

        right: 0;

        border-radius: 50px;

        background: #000000;

    }
　　/*旋转动画*/

    @-webkit-keyframes animal {

    0%{

      transform: rotate(0deg);

      -ms-transform: rotate(0deg);

      -webkit-transform: rotate(0deg);

    }

    100%{

      transform: rotate(-360deg);

      -ms-transform: rotate(-360deg);

      -webkit-transform: rotate(-360deg);

    }

}

    </style>

</head>

<body>
<!-- 容器 -->

<div></div>

</body>

</html>

div+伪元素实现太极图的更多相关文章

  1. CSS伪元素before、after妙用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. css---6伪元素选择器

    after                   :在内容后边 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. 基于CSS3伪元素和动画绘制旋转太极图

    通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  6. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  7. Effective前端4：尽可能地使用伪元素

    伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...

  8. 伪元素::after和::before

    ::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示, ...

  9. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

随机推荐

  1. 根据直方图 histogram 进行简单的图像检索

    https://github.com/TouwaErioH/Machine-Learning/tree/master/image%20identification/Histogram%20retrie ...

  2. u-boot 移植 --->6、引导Linux启动测试

    在引导Linux开机之前需要先清楚Linux启动的必要或者说是先决条件,这里就是提到了u-boot的作用了引用百度云---主要用于嵌入式系统的引导加载,其实在我调试下来总结一下就是初始化硬件这里的硬件 ...

  3. Taro 3.x in Action

    Taro 3.x in Action React, 小程序 https://taro-docs.jd.com/taro/docs/README Taro Next 跨端, 跨框架 Taro 是一个开放 ...

  4. JavaScript 实现 (ECMAScript 6)

    JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象: DOM 描述了处理网页内容的方法和接口: BOM 描述了与浏览器进行交互的方法和接口. ECMAScript.DOM ...

  5. 最新 Markdown for GitHub教程

    Markdown 教程 Markdown 是什么? Markdown 是一种方便记忆.书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档:譬如您正在阅读的这份文档. 它 ...

  6. MDN All In One

    MDN All In One https://github.com/mdn/ https://wiki.mozilla.org/MDN MDN 要凉了 https://developer.mozill ...

  7. React SSR in Action

    React SSR in Action react render HTML string from the server ReactDOMServer https://reactjs.org/docs ...

  8. vue页面切换过渡

    <!--<transition name="slide-left">--> <router-view></router-view>& ...

  9. NGK公链：夯实基础设施 实现产业大规模应用

    当前,区块链已经成为全球技术角逐的前沿,大国及科技巨头竞相在该领域布局,引导区块链服务实体经济,激发市场经济活力.据市场相关研究机构预测,2020年,基于区块链的业务将达到1000亿美元. 对于区块链 ...

  10. NGK的内存为何如此的火爆？

    要说最近最受关注的公链,当属NGK了.NGK代币在迎来43倍暴涨之后似乎进入了一个平板期,这让很多投资者的热情冷却了一半,就在大家以为对NGK放弃信心时,NGK又突然爆出了一个新的炒作点:NGK内存( ...