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 ...
随机推荐
- 如何用redis做缓存
redis缓存 在互联网应用中经常需要用redis来缓存热点数据. redis数据在内存,可以保证数据读取的高效,接近每秒数十万次的吞吐量 减少下层持久层数据库读取压力,像mongodb,每秒近千次读 ...
- 性能分析（1）- Java 进程导致 CPU 使用率升高，问题怎么定位？
性能分析小案例系列,可以通过下面链接查看哦 ps:这些分析小案例不能保证百分比正确,是博主学习过程中的总结,仅做参考 前提 本机有一个很占用 CPU 的项目,放在了 Tomcat 下启动着 如何定位 ...
- .NET CORE HttpClient使用
自从HttpClient诞生依赖,它的使用方式一直备受争议,framework版本时代产生过相当多经典的错误使用案例,包括Tcp链接耗尽.DNS更改无感知等问题.有兴趣的同学自行查找研究.在.NETC ...
- 在excel中如何给一列数据批量加上双引号
在实际开发中,会遇到这样的需求,大量的数据,需要从配置文件里读取,客户给到的枚举值是字符串,而配置文件里的数据,是json格式,需要加上双引号,这样就需要使用Excel来批量格式化一下数据. 客户给到 ...
- 从键盘输入一个字符串（长度不超过30），统计字符串中非数字的个数，并将统计的结果显示在屏幕上，用EXE格式实现。
问题 从键盘输入一个字符串(长度不超过30),统计字符串中非数字的个数,并将统计的结果显示在屏幕上,用EXE格式实现. 源程序 data segment hintinput db "plea ...
- PHP XML DOM：DOM 是什么？
PHP XML DOM 内建的 DOM 解析器使在 PHP 中处理 XML 文档成为可能. DOM 是什么? W3C DOM 提供了针对 HTML 和 XML 文档的标准对象集,以及用于访问和操作这些 ...
- Skill 扫描list中是否含有某元素
https://www.cnblogs.com/yeungchie/ code procedure(ycInListp(scan keylist) prog((times) times = 0 for ...
- luogu P4724 模板 三维凸包
LINK:三维凸包 一个非常古老的知识点.估计也没啥用. 大体上了解了过程 能背下来就背下来吧. 一个bf:暴力枚举三个点 此时只需要判断所有的点都在这个面的另外一侧就可以说明这个面是三维凸包上的面了 ...
- CF R 630 div2 1332 F Independent Set
LINK:Independent Set 题目定义了 独立集和边诱导子图.然而和题目没有多少关系. 给出一棵树 求\(\sum_{E'\neq \varnothing,E'\subset E}w(G( ...
- Python安装2 —— Pycharm2019.3.3的安装
本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12378617.html 一:什么是Pycharm PyCharm是一种Pytho ...