需求：使用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. 3.安装可视化工具kibana

    作者 微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-06-19 10:10:42 星期三 欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...

  2. codeforces 7B

    B. Memory Manager time limit per test 1 second memory limit per test 64 megabytes input standard inp ...

  3. C++ part7

    1.C++ 继承和组合 类的组合和继承一样,是复用的重要方式. 要优先使用组合而不是继承. 原因: 组合是黑箱复用,对局部类的内部细节不可见:继承是白箱复用,父类的内部细节可见,破坏封装性. 继承在编 ...

  4. 网络流学习-Ford-Fulkerson

    首先我们先解决最大流问题 什么是最大流问题呢 根据我的理解,有一个源点s,汇点t,s可以通过一个网络(雾)流向汇点t 但是每一条边都有他的最大传输容量限制,那么我们的任务是,如何分配流量使得..从s流 ...

  5. Spring框架整合Mybatis项目

    第一步:导入相关依赖jar包 <dependency> <groupId>org.mybatis</groupId> <artifactId>mybat ...

  6. GraphQL API In Action

    GraphQL API In Action GraphQL API express $ yarn add express express-graphql graphql # OR $ npm i -S ...

  7. tree traversal

    tree traversal tree 遍历 中序,顺序,左中右 先序,先父节点,中左右 后序,先子节点,左右中 二叉搜索树 "use strict"; /** * * @auth ...

  8. YAML & .yml

    YAML & .yml YAML: YAML Ain't Markup Language https://yaml.org/ https://github.com/yaml/www.yaml. ...

  9. Redis-第九章节-动态字符串

    目录 概述 SDS(动态字符串) SDS(动态字符串)与c语言字符串的区别 1.概述 String类型底层实现的简单动态字符串sds,是可以修改的字符串.它采用预分配冗余空间的方式来减少内存的频繁分配 ...

  10. 【commons-pool2源码】写前思考

    写作的初衷 工作4年多, 一直没有系统的阅读过优秀的开源代码, 所以从今年开始做一些尝试, 阅读源码并且试着将自己的理解以文章的形式输出, 从而达到以下目的: 通过阅读源码提升自身的技术水准, 通过写 ...