CSS动画实例：行星和卫星

设页面中有<div class=" planet "></div>，用来绘制一个行星和卫星图形。这个图形包括三部分：行星、卫星和卫星旋转的轨道。定义. planet的样式规则如下：

.planet

{

position:absolute;

top:80px;

left:80px;

height:100px;

width:100px;

border-radius:50%; border:1px solid #f00;

animation:rond 3s linear infinite;

}

.planet:before

{

content: "";

height:10px;

width:10px;

position:absolute;

background-color:#f00;

border-radius:50%;

top:50px;

left:-5px;

}

.planet:after

{

content: '';

height:60px;

width:60px;

background:#f00;

border-radius:50%;

position:absolute;

top:20px;

left:20px;

}

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

图1 行星和卫星

定义关键帧，使得卫星在轨道上绕行星旋转。编写的HTML文件如下。

<!DOCTYPE html>

<html>

<head>

<title>行星和卫星</title>

<style>

  .container

  {

     width:350px;

     height:350px;

     margin:100px auto;

     position:relative;

     border: 4px solid rgba(255, 0, 0, 0.9);

     border-radius: 10%;

  }

  .planet

 {

    position:absolute;

    top:80px;

    left:80px;

    height:100px;

    width:100px;

    border-radius:50%;  border:1px solid #f00;

    animation:rond 3s  linear infinite;

  }

  .planet:before

  {

    content: "";

    height:10px;

    width:10px;

    position:absolute;

    background-color:#f00;

    border-radius:50%;

    top:50px;

    left:-5px;

  }

  .planet:after

  {

    content: '';

    height:60px;

    width:60px;

    background:#f00;

    border-radius:50%;

    position:absolute;

    top:20px;

    left:20px;

  }

  @keyframes rond

  {

     0% {transform : rotate(0deg);}

     100% {transform : rotate(360deg);}

  }

</style>

</head>

<body>

<div class="container">

  <div class="planet"></div>

</div>

</body>

</html>

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

图2 绕行星旋转的卫星

在图2中有一颗红色的小卫星绕着红色的卫星旋转，再加入一个蓝色的小卫星绕着蓝色的行星旋转。可以编写如下的HTML文件。

<!DOCTYPE html>

<html>

<head>

<title>行星和卫星</title>

<style>

  .container

  {

     width:350px;

     height:350px;

     margin:100px auto;

     position:relative;

     border: 4px solid rgba(255, 0, 0, 0.9);

     border-radius: 10%;

  }

  .planet1

 {

    position:absolute;

    top:80px;

    left:80px;

    height:100px;

    width:100px;

    border-radius:50%;  border:1px solid #f00;

    animation:rond 3s  linear infinite;

  }

  .planet1:before

  {

    content: "";

    height:10px;

    width:10px;

    position:absolute;

    background-color:#f00;

    border-radius:50%;

    top:50px;

    left:-5px;

  }

  .planet1:after

  {

    content: '';

    height:60px;

    width:60px;

    background:#f00;

    border-radius:50%;

    position:absolute;

    top:20px;

    left:20px;

  }

  .planet2

 {

    position:absolute;

    top:180px;

    left:180px;

    height:80px;

    width:80px;

    border-radius:50%;  border:1px solid #00f;

    animation:rond 3s  linear infinite;

  }

  .planet2:before

  {

    content: "";

    height:10px;

    width:10px;

    position:absolute;

    background-color:#00f;

    border-radius:50%;

    top:40px;

    left:-5px;

  }

  .planet2:after

  {

    content: '';

    height:40px;

    width:40px;

    background:#00f;

    border-radius:50%;

    position:absolute;

    top:20px;

    left:20px;

  }

  @keyframes rond

  {

     0% {transform : rotate(0deg);}

     100% {transform : rotate(360deg);}

  }

</style>

</head>

<body>

<div class="container">

  <div class="planet1"></div>

  <div class="planet2"></div>

</div>

</body>

</html>

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

图3 绕各自轨道旋转的两颗卫星

上面的HTML文件中，为了绘制两颗行星，页面中定义了两个div：一个类名为planet1，另一个名为planet2。分别为两个类定义样式规则，这两个类的样式规则基本相同，复制后略作修改即可。

若在页面中搞多个绕各自轨道旋转的卫星怎么办呢？采用类似的方法（定义类名为planet3、planet4、…等层，再复制样式规则略作修改）虽然可以实现，但重复代码太多，导致HTML文件大小偏大。因此，采用自定义变量的方式更好些。

比较类.planet1和.planet2的样式规则定义，可以为一个绕轨道旋转的卫星抽象出5个属性：表示行星大小的--size、表示行星位置的--top和--left，表示卫星旋转速度的—speed、表示颜色的--color。

编写的HTML文件内容如下。

<!DOCTYPE html>

<html>

<head>

<title>行星和卫星</title>

<style>

  .container

  {

     width:350px;

     height:350px;

     margin:100px auto;

     position:relative;

     border: 4px solid rgba(255, 0, 0, 0.9);

     border-radius: 10%;

  }

  .planet

 {

    position:absolute;

    top:var(--top);

    left:var(--left);

    height:calc(var(--size) + 40px);

    width:calc(var(--size) + 40px);

    border-radius:50%;  border:1px solid var(--color);

    animation:rond var(--speed)  linear infinite;

  }

  .planet:before

  {

    content: "";

    height:10px;

    width:10px;

    position:absolute;

    background-color:var(--color);

    border-radius:50%;

    top:calc(var(--size) / 2 + 20px);

    left:-5px;

  }

  .planet:after

  {

    content: '';

    height:var(--size);

    width:var(--size);

    background:var(--color);

    border-radius:50%;

    position:absolute;

    top:20px;

    left:20px;

  }

  @keyframes rond

  {

     0% {transform : rotate(0deg);}

     100% {transform : rotate(360deg);}

  }

</style>

</head>

<body>

<div class="container">

  <div class="planet" style="--size:60px;--left:50px; --top: 30px; --color:#f00; --speed: 3s;"></div>

  <div class="planet" style="--size:60px;--left:200px; --top: 30px; --color:#f0f; --speed: 3s;"></div>

  <div class="planet" style="--size:40px;--left:25px; --top: 135px; --color:#ff0; --speed: 2.5s;"></div>

  <div class="planet" style="--size:40px;--left:135px; --top: 135px; --color:#0f0; --speed: 2.5s;"></div>

  <div class="planet" style="--size:40px;--left:245px; --top: 135px; --color:#0ff; --speed: 2.5s;"></div>

  <div class="planet" style="--size:60px;--left:50px; --top: 220px; --color:#00f; --speed: 3s;"></div>

  <div class="planet" style="--size:60px;--left:200px; --top: 220px; --color:#800080; --speed: 3s;"></div>

</div>

</body>

</html>

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

图4 绕各自轨道旋转的七颗卫星

通过这个例子，可以体会CSS中自定义变量的使用方法。

CSS动画实例：行星和卫星的更多相关文章

CSS动画实例
上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果代码:最外层div包含2个小的div : a和b. a有左右边框(高度 ...
CSS动画实例：太极图在旋转
利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1．旋转的太极图设页面中有<div ...
CSS动画实例：移动的眼珠子
适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...
CSS动画实例：小圆球的海洋
CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...
CSS动画实例：旋转的圆角正方形
在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...
CSS动画实例：一颗躁动的心
在页面中放置一个类名为container的层作为盛放心心的容器,在该层中再定义一个名为heart的子层,HTML代码描述如下: <div class="container"& ...
CSS动画实例：跳跃的字符
1．翻转的字符在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: <div class="container"> ...
CSS动画实例：Loading加载动画效果（三）
3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
CSS动画实例：升空的气球
1．制作一个气球设页面中有<div class="balloon"></div>,为. balloon设置样式规则如下: .balloon { heigh ...

随机推荐

IO—》转换流和缓冲流
转换流摘要: InputStreamReader和OutputStreamWriter他们分别是FileReader和FileWriter的父类当只是单纯的读写文件而不改变文件的编码格式时,就分别 ...
.NET CORE HttpClient使用
自从HttpClient诞生依赖,它的使用方式一直备受争议,framework版本时代产生过相当多经典的错误使用案例,包括Tcp链接耗尽.DNS更改无感知等问题.有兴趣的同学自行查找研究.在.NETC ...
面试官你好，我已经掌握了MySQL主从配置和读写分离，你看我还有机会吗？
我是风筝,公众号「古时的风筝」,一个简单的程序员鼓励师. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 面试官:我看你简历上写的你们公司数据库是 ...
PHP array_udiff_assoc() 函数
实例比较两个数组的键名和键值(使用内建函数比较键名,使用用户自定义函数比较键值),并返回差集: <?phpfunction myfunction($a,$b){if ($a===$b){ret ...
PDO::rollBack
PDO::rollBack — 回滚一个事务(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0) 说明语法 bool PDO::rollBack ( void )高佣联 ...
PHP simplexml_load_file() 函数
实例转换 XML 文件为 SimpleXMLElement 对象,然后输出对象的键和元素: <?php高佣联盟 www.cgewang.com$xml=simplexml_load_file( ...
ASP.NET MVC+LayUI视频上传
前言: 前段时间在使用APS.NET MVC+LayUI做视频上传功能的时,发现当上传一些内存比较大的视频就会提示上传失败,后来通过查阅相关资料发现.NET MVC框架为考虑安全问题,在运行时对请求的 ...
Hive和HBase
1. 两者分别是什么? Apache Hive是一个构建在Hadoop基础设施之上的数据仓库.通过Hive可以使用HQL语言查询存放在HDFS上的数据.HQL是一种类SQL语言,这种语言最终被转化为M ...
Maven知识记录（一）初识Maven私服
Maven知识记录(一)初识Maven私服什么是maven私服私服即私有的仓库.maven把存放文件的地方叫做仓库,我们可以理解成我门家中的储物间.而maven把存放文件的具体位置叫做坐标.我们项 ...
没用过消息队列？一文带你体验RabbitMQ收发消息
人生终将是场单人旅途,孤独之前是迷茫,孤独过后是成长. 楔子先给大家说声抱歉,最近一周都没有发文,有一些比较要紧重要的事需要处理. 今天正好得空,本来说准备写SpringIOC相关的东西,但是发现想 ...

CSS动画实例：行星和卫星

CSS动画实例：行星和卫星的更多相关文章

随机推荐

热门专题