通过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. mycat 1.6实现读写分离

    使用mysql的root账号执行mysql>grant all privileges on *.* to mycatuser@% identified by '123456';mysql> ...

  2. 自定义Antd Pro 默认元素

    概要 通用元素 修改的方式 主页面 标签上的图标 logo 和 系统名称 footer 的配置 loading 页面 最终效果 概要 使用 Antd Pro 来开发前端项目时, 生成的项目模板中, 一 ...

  3. 2014年 实验四 B2B模拟实验（二）

    [实验目的] ⑴.熟悉电子合同签订过程 ⑵.掌握网上招标的流程并体会招标对采购商带来的好处 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网 ⑶.电子商务模拟实验室软件包. [知识 ...

  4. 多测师讲解接口测试 _windows中搭建环境cms_高级讲师肖sir

    eclipse集成开发环境 搭建开发环境需要安装的工具如下 jdk-8u60-windows-x64.exe        jdk eclipse.rar      集成开发框架 mysql-inst ...

  5. 多测师讲解python_os模块_高级讲师肖sir

    #os.path.isfile()#:判断当前是否为文件,返回布尔值是文件则True否者Falsea_path='F:\cms搭建.rar' #lesson包b_path=r'D:\bao\kk '# ...

  6. Makefile-4-书写命令

    目录 前言 概念 Chapter 4:书写命令 4.1 显示命令 4.2 命令执行 * 4.3 命令出错 4.4 嵌套执行 make 4.5 定义命令包 参考 前言 本笔记主要记录Makefile一些 ...

  7. pytest文档50-命令行参数--durations统计用例运行时间

    前言 写完一个项目的自动化用例之后,发现有些用例运行较慢,影响整体的用例运行速度,于是领导说找出运行慢的那几个用例优化下. --durations 参数可以统计出每个用例运行的时间,对用例的时间做个排 ...

  8. go 多协程爬取图片

    package main import ( "fmt" "github.com/antchfx/htmlquery" "golang.org/x/ne ...

  9. PowerShell 定时输出citrix desktop昨日连接会话

    asnp citrix*$now_date = [datetime]::Today$day2 = [datetime]::Today - [TimeSpan]::FromHours(24)$fiel_ ...

  10. JS实现将二维数组生成到页面上

    前言 之前没说过数组,现在来写一下数组 CSS span { border:2px solid skyblue; width:30px; height: 30px; display: inline-b ...