需求：使用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. kubernetes进阶（二）核心网络插件Flannel

    网络插件Flannel介绍:https://www.kubernetes.org.cn/3682.html 首先,flannel利用Kubernetes API或者etcd用于存储整个集群的网络配置, ...

  2. 1054D Changing Array 【位运算+思维】

    题目:戳这里 题意:两个数n,k,满足给的n个数小于2的k次方.每个数可以进行一次操作,即把a[i]换成a[i]^(1<<k-1);求最多的连续区间数使得 区间[L,R] (1<=L ...

  3. HDU 6395 Sequence（分段矩阵快速幂）题解

    题意: 已知\(A,B,C,D,P,n\)以及 \[\left\{ \begin{aligned} & F_1 = A \\ & F_2 = B\\ & F_n = C*F_{ ...

  4. Cortex-M系列内核 启动文件分析

    最近终于闲了下来了准备好好学习下Cortex-M3/M4系列处理器的架构,经过各种资料的折磨也没法对它的整个工作过程能有个完整的认知,最后看到一片博客打算从程序的运行过程开始探究,所以首先就找到了启动 ...

  5. Docker in Action All In One

    Docker in Action All In One Docker https://www.docker.com/play-with-docker https://hub.docker.com/ $ ...

  6. React Hooks 实现一个计时器组件

    React Hooks 实现一个计时器组件 useEffect https://reactjs.org/docs/hooks-reference.html#useeffect import React ...

  7. nginx proxy

    listen 80; server_name localhost; # 访问"localhost"的全部请求会被转发到"localhost:81" # loca ...

  8. Node.js & ES modules & .mjs

    Node.js & ES modules & .mjs Node.js v13.9.0 https://nodejs.org/api/esm.html https://nodejs.o ...

  9. 可视化埋点 & XPath

    可视化埋点 & XPath https://www.w3.org/TR/xpath-full-text-30/ 数据的准确性 采集时机 数据发送策略 full XPath demo XML & ...

  10. Captain Technology INC浅谈新能源汽车的未来

    近日全世界上最大的资管公司贝莱德向位于的英国电动汽车初创公司Arrival投资1.18亿美元,且该公司已有投资者亚马逊和美国第二大汽车制造商福特汽车参投.中国最知名的电动车公司蔚来股价单日大涨22%, ...