通过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. 十一长假我肝了这本超硬核PDF，现决定开源！！

    写在前面 在 [冰河技术] 微信公众号中的[互联网工程]专题,更新了不少文章,有些读者反馈说,在公众号中刷 历史文章不太方便,有时会忘记自己看到哪一篇了,当打开一篇文章时,似乎之前已经看过了,但就是不 ...

  2. git 本地回滚到上一个版本

    linux下是 git reset --hard HEAD^ windows下是 git reset --hard HEAD"^"

  3. python数据清洗

    盖帽法 分箱法 简单随机抽和分层抽

  4. 【全网免费VIP观看】哔哩哔哩番剧解锁大会员-集合了优酷-爱奇艺-腾讯-芒果-乐视-ab站等全网vip视频免费破解去广告-高清普清电视观看-持续更新

    哔哩哔哩番剧解锁大会员-集合了优酷-爱奇艺-腾讯-芒果-乐视-ab站等全网vip视频免费破解去广告-高清普清电视观看-持续更新 前言 突然想看电视,结果 没有VIP 又不想花钱,这免费的不久来啦. 示 ...

  5. lumen 添加配置

    app同级目录新建config目录 添加配置文件 bootstrap/app.php里面加载 $app->configure('options');使用 $router->get('/', ...

  6. SVN如何回滚到指定版本

    以下内容网上收集整理. 方法一. 利用Export,这样你可以不丢失你新建的文件.打开你想要回滚的文件夹(受SVN版本控制).右键Tortoise SVN,然后在列表中选择 show log, 在看到 ...

  7. Python爬虫训练：爬取酷燃网视频数据

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 项目目标 爬取酷燃网视频数据 https://krcom.cn/ 环境 Py ...

  8. SpringMVC+Spring+MyBatis个人技术博客源码

    项目描述 Hi,大家好,又到了源码分享时间啦,今天我们分享的源码一个<个人技术博客>,该博客是基于SSM实现的一个个人博客系统,适合初学SSM和个人博客制作的同学学习.有了这个源码,直接买 ...

  9. Mybatis---02Mybatis执行过程分析

    1.在动态代理中,执行MapperMethod类里面的execute方法,这个方法里面最终是调用DefaultSqlSession类中的相关操作方法.接着之前的文章继续,在DefaultSqlSess ...

  10. redis简介以及redis集群配置

    简介: redis 是一个高性能的key-value数据库..它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set --有序 ...