通过CSS3的动画知识来完成一个旋转的太极。

任务

1、创建一个div，用CSS控制其大小、边框、位置等，做成一个静态的圆形，一半为红色一半为白色。

2、用div的伪元素位置两个圆环并放置核实位置，使其成为一个太极图案。

3、创建动画。

4、定义动画的重复属性，让其循环播放。

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>

    <style>

        /* 外围样式 */

        html,

        body {

            margin: 0;

            padding: 0;

            height: 100%;

        }

        /* 主体样式 */

        div {

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            box-sizing: border-box;

            width: 400px;

            height: 400px;

            margin: auto;

            border-bottom: 200px solid red;

            border-radius: 50%;

            transform-origin: 50% 50%;

            animation-name: rotate;

            animation-duration: 5s;

            animation-timing-function: linear;

            /* 补充代码 */

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

　　参考代码：

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title></title>

    <style>

        /* 外围样式 */

        html,

        body {

            margin: 0;

            padding: 0;

            height: 100%;

        }

        /* 主体样式 */

        div {

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            box-sizing: border-box;

            width: 400px;

            height: 400px;

            margin: auto;

            border-bottom: 200px solid red;

            border-radius: 50%;

            transform-origin: 50% 50%;

            animation-name: rotate;

            animation-duration: 5s;

            animation-timing-function: linear;

            /* 补充代码 */

            box-shadow: 0 0 0 1px red,

                0 0 20px 5px red;

            border-top: 200px solid white;

            animation-direction: normal;

            animation-iteration-count: infinite;

            animation-play-state: running;

        }

        /* 太极半圆 */

        div::after {

            width: 100px;

            height: 100px;

            border: 50px solid red;

            position: absolute;

            content: '';

            display: block;

            top: -100px;

            left: 0;

            border-radius: 50%;

            background-color: white;

        }

        div::before {

            width: 100px;

            height: 100px;

            border: 50px solid white;

            position: absolute;

            content: '';

            display: block;

            top: -100px;

            right: 0px;

            border-radius: 50%;

            background-color: red;

        }

        @keyframes rotate {

            from {

                transform: rotateZ(0deg);

            }

            to {

                transform: rotateZ(360deg);

            }

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

　　

基于CSS3伪元素和动画绘制旋转太极图的更多相关文章

  1. 使用 CSS3 伪元素实现立体的照片堆叠效

    CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...

  2. 基于css3的鼠标经过动画显示详情特效

    之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览   源码下载 ...

  3. .NET绘制旋转太极图

    .NET绘制旋转太极图 我之前发了一篇<用.NET写"算命"程序>的文章,但有人纷纷提出了质疑,认为没有"科学"(mi xin)依据

  4. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  5. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  6. CSS3伪元素、伪类选择器

    伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...

  7. Css3 伪元素

    伪元素---用于向某些选择器设置特殊的效果 语法:元素::伪元素 (element::pseudo-element) 兼容性:IE9+ FireFox4+ Chrome Safari Opera fi ...

  8. CSS3伪元素 ::first-letter ::first-line ::selection

    首先,关于伪元素的语法: 有的时候单冒号也能用,但最好写双冒号. 伪类:匹配的是元素(不同状态或结构的). 伪元素:匹配的是元素中的一部分内容(首字符,首行文本). ::first-letter 匹配 ...

  9. Winform GDI+绘图二：绘制旋转太极图

    大家好,今天有时间给大家带来Winform自绘控件的第二部分,也是比较有意思的一个控件:旋转太极图. 大家可以停下思考一下,如果让你来绘制旋转的太极图,大家有什么样的思路呢?我今天跟大家展示一下,我平 ...

随机推荐

  1. Flink深入浅出: 资源管理(v1.11)

    -- 图片来自 <国家地理中文网>-- 往期推荐: Flink深入浅出:部署模式 Flink深入浅出:内存模型 Flink深入浅出:JDBC Source从理论到实战 Flink深入浅出: ...

  2. Oracle - ascii为0的陷阱

    一.概述 ascii0是个空字符,如果将这个字符插入到oracle数据库中会是什么现象,是null吗? 二.正式实验 创建一张测试表 create table test(id int, name va ...

  3. 2017-18一《电子商务概论》本科作业-商A1551

    第1次作业: 1 2017年双十一新营销方案 2 销售额达1682亿元分析组成及了解猫狗大战 3 破亿店铺举例. 第2次作业: 1.你如何来定义和理解电子商务?电子商务对社会经济带了怎样的影响,企业. ...

  4. 使用Spring Boot创建docker image

    目录 简介 传统做法和它的缺点 使用Buildpacks Layered Jars 自定义Layer 简介 在很久很久以前,我们是怎么创建Spring Boot的docker image呢?最最通用的 ...

  5. Android ContentProvider 基本原理和使用详解

    ContentProvider(内容提供者)是 Android 的四大组件之一,管理 Android 以结构化方式存放的数据,以相对安全的方式封装数据(表)并且提供简易的处理机制和统一的访问接口供其他 ...

  6. scrapy数据写入管道

    1 setting里面启动管道 ITEM_PIPELINES = { 'ganji.pipelines.GanjiPipeline': 300,}2 拿到的数据通过yield返回给管道 # -*- c ...

  7. 极简 Node.js 入门 - 5.3 静态资源服务器

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  8. jquery ui,拖拽,dragsort

    一.导入js.导入jquery.dragsort.js外还需要导入jQuery. 二.HTML部分 <!DOCTYPE html> <html> <head> &l ...

  9. Unity实现代码控制音频播放

    前言 很久没说过Unity了,现在说一下Unity用代码控制音频播放 准备工作 1.需要播放的音频 2.给需要加声音的对象加Audio Source组件 3.新建Play脚本,并绑定需要播放声音的对象 ...

  10. 总结2020最新50道Python面试题集锦（附答案）

    Python是目前编程领域最受欢迎的语言.在本文中,我将总结Python面试中最常见的50个问题.每道题都提供参考答案,希望能够帮助你在2019年求职面试中脱颖而出,找到一份高薪工作.这些面试题涉及P ...