通过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. swoole父进程和子进程之间通信的例子

    <?php /** 这是一个swoole父进程和子进程之间通信的例子 */ //进程创建成功后回调处理 function handle(swoole_process $worker){ //从进 ...

  2. 【Flutter 混合开发】嵌入原生View-Android

    Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-IOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...

  3. golang通过cgo调用lua

    目录 1.前期准备 2.测试go代码 3.完成的一个学习项目 4.总结 1.前期准备 1.第三方库:https://github.com/aarzilli/golua 2.下载lua源码:https: ...

  4. 【并查集】BZOJ 1854 连续攻击游戏

    题目内容 洛谷链接 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性.并 ...

  5. kafka-伪集群搭建

      一.简介 Apache Kafka是一个快速.可扩展的.高吞吐的.可容错的分布式"发布-订阅"消息系统,使用Scala与Java语言编写,能够将消息从一个端点传递到另一个端点, ...

  6. swoft 事件监听和触发 打印sql日志

    需求 打印出swoft的所有sql日志到控制台或者文件 只要打开listener 下面 Dbranlisten.php 里面最后一行注释即可,swoft已经帮我们实现好了 ____ _____ ___ ...

  7. php长时间的脚本，报502

    php-fpm超时时间设置request_terminate_timeout分析原创loophome 最后发布于2017-11-22 16:17:59 阅读数 21201 收藏展开今天发现了一个很神奇 ...

  8. laravel重写

    laravel location / { try_files $uri $uri/ /index.php?$query_string; } ci location / { try_files $uri ...

  9. 第十九章 keepalived高可用

    一.keepalived高可用 1.什么是高可用 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用户是无感知的. 2.高可用使用的工具 1 ...

  10. Kettle学习笔记（一）

    Kettle简介 Kettle是一款国外开源的ETL工具,纯java编写,可以在Windows.Linux.Unix上运行,s数据抽取高效稳定.Kettle 中文名称叫水壶,该项目的主程序员MATT ...