利用CSS可以构造出图形，然后可以对构造的图形添加动画效果。下面我们通过旋转的太极图、放大的五角星、跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法。

1．旋转的太极图

设页面中有<div class="shape"></div>，若为. shape设置样式规则如下：

.shape

{

width: 192px;

height: 96px;

background: #fff;

border-color: #000;

border-style: solid;

border-width: 4px 4px 100px 4px;

border-radius: 50%;

}

可在页面中显示如图1所示的图形。

图1  上下两个半圆

若将. Shape的样式规则设置如下：

.shape

{

background: #000;

border: 36px solid #fff;

border-radius: 50%;

width: 24px;

height: 24px;

}

则可在页面中显示如图2所示的图形。

图2  黑心圆

如将黑心圆的背景填充色和边框填充色交换一下，则可在页面中显示如图3所示的图形。

图3  白心圆

将图2和图3适当地放入图1中，则可以绘制出一个太极图。

为这个太极图定义关键帧，使得它旋转起来。编写的HTML文件内容如下。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>旋转的太极图</title>
  5. <style>
  6.   .container
  7.   {
  8.     margin: 0 auto;
  9.     width: 300px;
  10.     height:300px;
  11.     position: relative;
  12.     display:flex;
  13.     justify-content:center;
  14.     align-items:center;
  15.     background:#d8d8d8;
  16.     border: 4px solid rgba(255, 0, 0, 0.9);
  17.     border-radius: 10%;
  18.   }
  19.   .shape
  20.   {
  21.     width: 192px;
  22.     height: 96px;
  23.     background: #fff;
  24.     border-color: #000;
  25.     border-style: solid;
  26.     border-width: 4px 4px 100px 4px;
  27.     border-radius: 50%;
  28.     position: relative;
  29.     animation:rotate 2s linear infinite;
  30.   }
  31.   .shape:before
  32.   {
  33.     content: "";
  34.     position: absolute;
  35.     top: 50%;
  36.     left: 0;
  37.     background: #fff;
  38.     border: 36px solid #000;
  39.     border-radius: 50%;
  40.     width: 24px;
  41.     height: 24px;
  42.   }
  43.   .shape:after
  44.   {
  45.     content: "";
  46.     position: absolute;
  47.     top: 50%;
  48.     left: 50%;
  49.     background: #000;
  50.     border: 36px solid #fff;
  51.     border-radius:50%;
  52.     width: 24px;
  53.     height: 24px;
  54.    }
  55.    @keyframes rotate
  56.    {
  57.       0%   { transform: rotate(0deg); }
  58.       100% { transform:rotate(360deg); }
  59.    }
  60. </style>
  61. </head>
  62. <body>
  63. <div  class="container">
  64.     <div class="shape"></div>
  65. </div>
  66. </body>
  67. </html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。

图4  旋转的太极图

2．由小到大的五角星

设页面中有<div class="shape"></div>，若为. shape设置样式规则如下：

.shape

{

position: relative;

display: block;

width:0px;

height:0px;

border-left:  100px solid transparent;

border-right: 100px solid transparent;

border-bottom:70px  solid red;

transform:rotate(35deg);

}

.shape:before

{

content: '';

position: absolute;

width: 0px;

height: 0px;

top: -45px;

left: -62.5px;

border-left:   30px solid transparent;

border-right:  30px solid transparent;

border-bottom: 80px solid green;

transform: rotate(-35deg);

}

.shape:after

{

content: '';

position: absolute;

width: 0px;

height: 0px;

top: 3px;

left: -105px;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 70px solid blue;

transform:rotate(-70deg);

}

可在页面中显示如图5所示的五角星。这个五角星是由三个三角形拼成的，为了方便理解，将三个三角形设置成不同的颜色。

图5  由三个三角形拼成的五角星

将三个三角形的颜色都设置成红色，得到一个红色五角星，并为这个五角星定义关键帧，使得它由小慢慢放大。编写的HTML文件内容如下。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>放大的五角星</title>
  5. <style>
  6.   .container
  7.   {
  8.     margin: 0 auto;
  9.     width: 300px;
  10.     height:300px;
  11.     position: relative;
  12.     display:flex;
  13.     justify-content:center;
  14.     align-items:center;
  15.     background:#d8d8d8;
  16.     border: 4px solid rgba(255, 0, 0, 0.9);
  17.     border-radius: 10%;
  18.   }
  19.   .shape
  20.   {
  21.     position: relative;
  22.     display: block;
  23.     width:0px;
  24.     height:0px;
  25.     border-left:  100px solid transparent;
  26.     border-right: 100px solid transparent;
  27.     border-bottom:70px  solid red;
  28.     transform:rotate(35deg);
  29.     animation:anim 2s linear infinite;
  30.   }
  31.   .shape:before
  32.   {
  33.     content: '';
  34.     position: absolute;
  35.     width: 0px;
  36.     height: 0px;
  37.     top: -45px;
  38.     left: -62.5px;
  39.     border-left:   30px solid transparent;
  40.     border-right:  30px solid transparent;
  41.     border-bottom: 80px solid red;
  42.     transform: rotate(-35deg);
  43.   }
  44.   .shape:after
  45.   {
  46.     content: '';
  47.     position: absolute;
  48.     width: 0px;
  49.     height: 0px;
  50.     top: 3px;
  51.     left: -105px;
  52.     border-left: 100px solid transparent;
  53.     border-right: 100px solid transparent;
  54.     border-bottom: 70px solid red;
  55.     transform:rotate(-70deg);
  56.   }
  57.   @keyframes anim
  58.   {
  59.      0%   { transform:  rotate(35deg) scale(0.2);  opacity: 0.1; }
  60.      80%,100% { transform:  rotate(35deg) scale(1.2);  opacity: 1;  }
  61.   }
  62. </style>
  63. </head>
  64. <body>
  65. <div  class="container">
  66.     <div class="shape"></div>
  67. </div>
  68. </body>
  69. </html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图6所示的动画效果。

图6  放大的五角星

3．弯月在跳舞

设页面中有<div class="shape"></div>，若为. shape设置样式规则如下：

.shape

{

display: block;

width: 160px;

height: 160px;

background:#ff0000;

border-radius: 50%;

transform: rotateZ(45deg)  rotateX(70deg);

}

可在页面中显示如图7所示的图形。

图7  红色斜椭圆

若在.shape样式定义中加上一句：box-shadow: 32px 0px 0 0px #ffffff;，则在页面中显示如图8所示的图形，红色斜椭圆带白色阴影。

图8   带白色阴影的红色斜椭圆（1）

若再将rotateX(70deg)修改为rotateY(70deg)，则在页面中显示如图9所示的图形。

图9  带白色阴影的红色斜椭圆（2）

若定义如下的关键帧，让红色椭圆带的白色阴影在给定的8个点循环运动，可呈现出如图10所示的动画效果。

@keyframes spin

{

0%,100%  { box-shadow: 32px 0px 0 0px #ffffff; }

12%      { box-shadow: 32px 32px 0 0 #ffffff;  }

25%      { box-shadow: 0 32px 0 0px #ffffff;   }

37%      { box-shadow: -32px 32px 0 0 #ffffff; }

50%      { box-shadow: -32px 0 0 0 #ffffff;    }

62%      { box-shadow: -32px -32px 0 0 #ffffff;}

75%      { box-shadow: 0px -32px 0 0 #ffffff;  }

87%      { box-shadow: 32px -32px 0 0 #ffffff; }

}

图10  白色阴影运动效果（1）

若将斜椭圆的填充色设置为背景色，只见到移动的白色阴影，则呈现出如图11所示的动画效果。

图11  白色阴影运动效果（2）

图9对应的白色阴影运动效果如图12所示。

图12  白色阴影运动效果（3）

将图11和图12中运动的两个白色阴影组合起来，编写如下的HTML文件。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>跳舞的弯月</title>
  5. <style>
  6.   .container
  7.   {
  8.     margin: 0 auto;
  9.     width: 300px;
  10.     height:300px;
  11.     position: relative;
  12.     display:flex;
  13.     justify-content:center;
  14.     align-items:center;
  15.     background:#d8d8d8;
  16.     border: 4px solid rgba(255, 0, 0, 0.9);
  17.     border-radius: 10%;
  18.   }
  19.   .shape
  20.   {
  21.     width: 160px;
  22.     height: 160px;
  23.     border-radius: 50%;
  24.     transform: rotateZ(45deg);
  25.   }
  26.   .shape:before, .shape:after
  27.   {
  28.     content: '';
  29.     display: block;
  30.     position: absolute;
  31.     top: 0;
  32.     left: 0;
  33.     width: 160px;
  34.     height: 160px;
  35.     border-radius: 50%;
  36.     animation: 1s spin linear infinite;
  37.   }
  38.   .shape:before
  39.   {
  40.     transform: rotateX(70deg);
  41.   }
  42.   .shape:after
  43.   {
  44.     transform: rotateY(70deg);
  45.     animation-delay: 0.5s;
  46.   }
  47.   @keyframes spin
  48.   {
  49.     0%,100%  { box-shadow: 32px 0px 0 0px #ffffff; }
  50.     12%      { box-shadow: 32px 32px 0 0 #ffffff;  }
  51.     25%      { box-shadow: 0 32px 0 0px #ffffff;   }
  52.     37%      { box-shadow: -32px 32px 0 0 #ffffff; }
  53.     50%      { box-shadow: -32px 0 0 0 #ffffff;    }
  54.     62%      { box-shadow: -32px -32px 0 0 #ffffff;}
  55.     75%      { box-shadow: 0px -32px 0 0 #ffffff;  }
  56.     87%      { box-shadow: 32px -32px 0 0 #ffffff; }
  57.   }
  58. </style>
  59. </head>
  60. <body>
  61. <div  class="container">
  62.     <div class="shape"></div>
  63. </div>
  64. </body>
  65. </html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图13所示的动画效果，好像两个弯月在跳“双人舞”。

图13  跳“双人舞”的弯月

仿照上面的思想，我们还可以编写如下的HTML文件，实现以原子为中心的电子旋转的动画效果。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>旋转的电子</title>
  5. <style>
  6.   .container
  7.   {
  8.     margin: 0 auto;
  9.     width: 300px;
  10.     height:300px;
  11.     position: relative;
  12.     display:flex;
  13.     justify-content:center;
  14.     align-items:center;
  15.     background:#d8d8d8;
  16.     border: 4px solid rgba(255, 0, 0, 0.9);
  17.     border-radius: 10%;
  18.   }
  19.   .shape
  20.   {
  21.     position: relative;
  22.     width: 24px;
  23.     height: 24px;
  24.     background-color: #f00;
  25.     border-radius: 50%;
  26.     animation: anim1 20s infinite linear;
  27.   }
  28.   .shape:before, .shape:after
  29.   {
  30.     content: '';
  31.     border-radius: 100%;
  32.     position: absolute;
  33.     top: 50%;
  34.     left: 50%;
  35.     transform: translate(-50%, -50%);
  36.   }
  37.   .shape:before
  38.   {
  39.     width: 60px;
  40.     height: 200px;
  41.     animation: anim2 .8s linear infinite;
  42.   }
  43.   .shape:after
  44.   {
  45.     width: 200px;
  46.     height: 60px;
  47.     animation: anim2 1.2s linear infinite;
  48.   }
  49.   @keyframes anim1
  50.   {
  51.      0%   { transform: rotate(0deg);   }
  52.      100% { transform: rotate(360deg); }
  53.   }
  54.   @keyframes anim2
  55.   {
  56.      0%, 100%  { box-shadow: 2px -2px 0 1.5px #fff; }
  57.      25%       { box-shadow: 2px 2px 0 1.5px #fff;  }
  58.      50%       { box-shadow: -2px 2px 0 1.5px #fff; }
  59.      75%       { box-shadow: -2px -2px 0 1.5px #fff;}
  60.   }
  61. </style>
  62. </head>
  63. <body>
  64. <div  class="container">
  65.     <div class="shape"></div>
  66. </div>
  67. </body>
  68. </html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图14所示的动画效果，好像两个电子绕中心原子在各自轨道旋转。

图14  绕中心原子旋转的电子

CSS动画实例：太极图在旋转的更多相关文章

  1. CSS动画实例

    上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b.   a有左右边框(高度 ...

  2. CSS动画实例：旋转的圆角正方形

    在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...

  3. CSS动画实例：移动的眼珠子

    适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...

  4. CSS动画实例：小圆球的海洋

    CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...

  5. CSS动画实例：一颗躁动的心

    在页面中放置一个类名为container的层作为盛放心心的容器,在该层中再定义一个名为heart的子层,HTML代码描述如下: <div class="container"& ...

  6. CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  7. CSS动画实例：行星和卫星

    设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...

  8. CSS动画实例：跳跃的字符

    1．翻转的字符 在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: <div class="container"> ...

  9. CSS动画实例：Loading加载动画效果（一）

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

随机推荐

  1. centos7 安装 isign

    centos应该自带python和openssl,这两个就不用装了, 先安装zip和git yum install -y unzip zip yum install git 然后克隆代码: https ...

  2. Mybatis（五）Spring整合Mybatis之mapper动态代理开发

    要操作的数据库: IDEA创建的Java工程,目录结构如下: 一.导包 1.spring的jar包 2.Mybatis的jar包 3.Spring+mybatis的整合包. 4.Mysql的数据库驱动 ...

  3. 小书MybatisPlus第8篇-逻辑删除实现及API细节精讲

    本文为Mybatis Plus系列文章的第8篇,前7篇访问地址如下: 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查 小书MybatisPlus第2篇-条件构造器的应用及总 ...

  4. 使用AB对Nginx压测和并发预估

    简介 ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基于URL的. # 1.ab每次只能测试一个URL,适合做重复压力测试 # 2.参数很多,可以支持添加c ...

  5. 进度条函数 -------ajax初试

    做一个显示任务完成情况的进度条: <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  6. Python Tuple(元组) cmp()方法

    描述 Python 元组 cmp() 函数用于比较两个元组元素.高佣联盟 www.cgewang.com 语法 cmp()方法语法: cmp(tuple1, tuple2) 参数 tuple1 -- ...

  7. PHP show_source() 函数

    实例 对测试文件("test.php")进行 PHP 语法高亮显示: <html><body><?phpshow_source("test. ...

  8. C/C++编程笔记：C语言制作情侣必备《爱情电子相册》，源码解析！

    今天是521,就分享一个程序员必会的——情侣回忆杀<爱情电子相册>吧!话不多说,先上思路,后接源码! 具备能力: 1.基本可视化编程 1.1 initgraph(800,600); 1.2 ...

  9. MapReduce之GroupingComparator分组（辅助排序、二次排序）

    指对Reduce阶段的数据根据某一个或几个字段进行分组. 案例 需求 有如下订单数据 现在需要找出每一个订单中最贵的商品,如图 需求分析 利用"订单id和成交金额"作为key,可以 ...

  10. 算法图解（python2.7）高清PDF电子书

    点击获取提取码:pzhb 内容简介 本书示例丰富,图文并茂,以让人容易理解的方式阐释了算法,旨在帮助程序员在日常项目中更好地发挥算法的能量.书中的前三章将帮助你打下基础,带你学习二分查找.大O表示法. ...