需求：使用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. Dubbo和SpringCloud的优劣势比较--总体架构

    从整体架构上来看 二者模式接近,都需要服务提供方,注册中心,服务消费方.差异不大.详见下方: Dubbo Provider: 暴露服务的提供方,可以通过jar或者容器的方式启动服务 Consumer: ...

  2. Nginx 服务介绍

    目录 静态 / 动态 Web 服务 Nginx 简介 Nginx 的优点 Nginx 和 Apache 的比较 Nginx 的安装 Nginx 相关文件 Nginx 主配置文件 Nginx 虚拟主机配 ...

  3. struct 和 class的区别

    struct和class如果按照在C的时代,还是有很大差别的. c中struct的定义如下: struct  结构名 {   成员表 }: 因为struct是一种数据类型,那么就肯定不能定义函数,所以 ...

  4. C++程序代码优化的方法

    1.选择合适的算法和数据结构 选择一种合适的数据结构很重要,如果在一堆随机存放的数中使用了大量的插入和删除指令,那使用链表要快得多.数组与指针语句具有十分密切的关系,一般来说,指针比较灵活简洁,而数组 ...

  5. 全球最好 css3 website

    http://www.awwwards.com/ http://www.revolution.pn/ http://www.bestcss.in/ http://www.csswinner.com/ ...

  6. web 安全 & web 攻防: XSS（跨站脚本攻击）和 CSRF（跨站请求伪造）

    web 安全 & web 攻防: XSS(跨站脚本攻击)和 CSRF(跨站请求伪造) XSS(跨站脚本攻击)和CSRF(跨站请求伪造) Cross-site Scripting (XSS) h ...

  7. ES6 Set All In One

    ES6 Set All In One Set 集合 Map 字典/地图 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

  8. django学习-3.如何编写一个html页面并展示到浏览器，及相关导入错误的解决方案

    1.前言 在django中,视图的概念是:具有相同功能和模板的网页,都可以称为视图.通俗一点来说,就是你平常打开任一浏览器,输入一个地址A后看到浏览器窗口展示出来地址A所对应的页面内容B,页面内容B就 ...

  9. C++算法代码——关于马的问题

    题目来自:http://218.5.5.242:9018/JudgeOnline/problem.php?id=1285 题目描述 小R参加一个派对,这个派队的参加者需要带上四匹颜色不同的马.小R目前 ...

  10. Mysql训练：where后不可以进行聚合函数的判断，而having可以进行聚合函数的判断

    力扣题目:查找重复的电子邮箱 编写一个 SQL 查询,查找 Person 表中所有重复的电子邮箱. +----+---------+ | Id | Email | +----+---------+ | ...