需求：使用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微服务到k8s集群(1)之Zookeeper部署

    基础架构 主机名 角色 IP地址 mfyxw10.mfyxw.com K8S代理节点1,zk1 192.168.80.10 mfyxw20.mfyxw.com K8S代理节点2,zk2 192.168 ...

  2. OpenStack Train版-14.安装块存储服务cinder（存储节点）

    安装cindoer块存储服务节点(存储节点192.168.0.40)使用默认的LVM卷方法,之后改为ceph存储 安装LVM软件包 [root@cinder01 ~]# yum install lvm ...

  3. 二进制安装kubernetes（一） 环境准备及etcd组件安装及etcd管理软件etcdkeeper安装

    实验环境: 架构图: 主机环境: 操作系统:因docker对内核需要,本次部署操作系统全部采用centos7.6(需要内核3.8以上) VM :2C 2G 50G * 5  PS:因后面实验需要向k8 ...

  4. linux repo init 遇到的问题

    问题描述: 利用repo从远程服务器上取代码时候,出现错误  fatal: cannot make .repo directory:Permission denied, 加了sudo 之后,还是不行, ...

  5. redis键过期时间

    redis服务器中每个数据库都是一个redisDb,而redisDb实质上是一个字典的模型,数据库的每一个键都是一个字典的键值,对数据库的增删改查也就是对字典对象的增删改查. redis在维护带有过期 ...

  6. springboot（六）Email demo

    项目中经常使用邮件发送提醒功能,比如说更新安全机制,发送邮件通知用户等 一.简单邮件发送 导入依赖: <dependency> <groupId>org.springframe ...

  7. 使用 js 实现十大排序算法: 冒泡排序

    使用 js 实现十大排序算法: 冒泡排序 冒泡排序 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  8. Serverless & FaaS

    Serverless & FaaS Function as a Service 通过 Functions(一个事件驱动型无服务器计算平台,还可以解决复杂的业务流程问题)更加高效地进行开发; 在 ...

  9. css & circle & shapes

    css & circle & shapes css-tricks circle https://css-tricks.com/the-shapes-of-css/ https://cs ...

  10. Axios all in one

    Axios all in one https://github.com/axios/axios#example GET const axios = require('axios'); // Make ...