通过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. devops-持续集成管理之SonarQube

    1. devops-持续集成管理之SonarQube  1) 代码质量七宗罪 编码规范:是否遵守了编码规范,遵循了最佳实践. 潜在的BUG:可能在最坏情况下出现问题的代码,以及存在安全漏洞的代码. 文 ...

  2. Java9系列第三篇-同一个Jar支持多JDK版本运行

    我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...

  3. EV加密播放器的分析过程+过虚拟机方法

    开启了OD载入播放器进行分析,发现如下问题:1.播放器会进行翻录检测2.防止虚拟机播放3.视频播放后,可直接对内存操作提取出源视频翻录检测:主要是对指定的文件名或进程名对比虚拟机检测:是针对虚拟机特征 ...

  4. Aspose.Words实现邮件合并功能和打印

    前言 最近公司要做一个B/S架构的web打印系统,主要是可以上传.下载.邮件合并.打印等等,还有就是角色的分配.用户的创建.日志记录等等,跟一般的web系统一样.可能不一样的就是需求:想把excel的 ...

  5. java中true不是关键字？

    java中true ,false , null在java中不是关键字,也不是保留字,它们只是显式常量值,但是你在程序中不能使用它们作为标识符. 其中const和goto是java的保留字.java中所 ...

  6. spring与缓存注解，以及encache缓存使用

    随着时间的积累,应用的使用用户不断增加,数据规模也越来越大,往往数据库查询操作会成为影响用户使用体验的瓶颈,此时使用缓存往往是解决这一问题非常好的手段之一.Spring 3开始提供了强大的基于注解的缓 ...

  7. C2. Pokémon Army (hard version) 解析(思維)

    Codeforce 1420 C2. Pokémon Army (hard version) 解析(思維) 今天我們來看看CF1420C2 題目連結 題目 略,請直接看原題. 前言 根本想不到這個等價 ...

  8. uniapp使用swiper组件做tab切换动态获取高度

    swiper对高度进行了限制,所以说通常做出了tab切换的效果但是内容经常被截取掉???? 所以我在前端做了一个动态获取高度的功能 选项卡标题也就是tab切换的效果 选项卡内容区域的高度自适应 因为进 ...

  9. Luogu P4234 最小差值生成树

    题意 给定一个 \(n\) 个点 \(m\) 条边的有权无向图,求出原图的一棵生成树使得该树上最大边权与最小边权的差值最小. \(\texttt{Data Range:}1\leq n\leq 5\t ...

  10. K8S环境快速部署Kafka(K8S外部可访问)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...