巧妙利用CSS3实现太阳系行星公转运动轨迹
前段时间在博客园看到一篇很不错的文章,就是介绍如何用CSS3来实现太阳系中行星的运动。本小姐处于好奇心从头到完整的看完了。突然发现好奇不仅仅害死猫,也可以增长知识嘛(你这是什么谬论!!!)。也许有的朋友看过有关的文章那么今天我们就一起来看看怎么巧妙的利用CSS3 来实现这么漂亮的动画的吧!
我不清楚大家对于CSS3的动画了解多少,但是我对于 CSS3的东西还是限制与用什么查什么的阶段。css3的animation动画,结合transform的大小、旋转、位移、斜切,通过两三行代码,便可做出很多有趣的效果。
650) this.width=650;" src="/d/ezdimg/2023022007/tberr00pz2z207797.webp" alt="taiyangxi" width="643" height="608" data-src="/d/ezdimg/2023022007/41njgacelmk207798.webp">
看不到动态图的请点击以下图片应该就可以看到了
这篇文章我很早就想分享出来了,但是你们都知道我那么懒,(懒癌晚期了已经)。 在端午节之前我就自己写好了demo,但是每次回家都玩狗,压根不去开电脑。你们肯定在想没救了这人……
废话不扯了,我和别人的写法可能不一样,下面按照我的思路给大家介绍这个动画吧。
第一、动画实现的思路
在日常写项目的时候不管是大到后台的系统管理,还是小到一个宣传的单页,我都会先拿来分析一下再去着手制作(PS: 刚上班的时候有项目来就赶紧写,从来不把整个需求看完,结果就是全部从写,所以磨刀不误砍柴工,把我的惨痛经验送给初学者们)。
下面我们一起来分析一下这个动画的思路
看图片我们知道这个是一个旋转动画所以我们会用到 CSS3 transform
所有行星旋转围绕的中心都是太阳,而默认的都是自己的重心但是这里我们需要都是太阳 transform-origin (这个是重点)
@keyframes rotation 这个就是最后一步,当布局完成我们就可以加上动画了
第二、太阳系的HTML
接下来讨论太阳系的制作,跟上面不同的地方是行星是围绕着太阳转的,而轮子是围绕着自己的圆心转的,也就是说他们转的基点不同。可以看出,transform的基点默认是本身的中心center,所以我们要改变行星的进行转换的中心点transform-origin。太阳系的html结构如下:
class为 *-mercury-track 是行星的运行轨道
<div > <div class='sun'></div> <div class='mercury-track'></div> <div class='mercury'></div> <div class='venus-track'></div> <div class='venus'></div> <div class='earth-track'></div> <div class='earth'></div> <div class='mars-track'></div> <div class='mars'></div> <div class='jupiter-track'></div> <div class='jupiter'></div> <div class='saturn-track'></div> <div class='saturn'></div> <div class='uranus-track'></div> <div class='uranus'></div> <div class='pluto-track'></div> <div class='pluto'></div></div>
太阳位于div galaxy的中间,让其它行星位于太阳的右边排成一条线。设置galaxy的width和height都为1300px。sun图片的大小为100px*100px,所以sun的left值和top值都为(1300 � 100) / 2 = 600px,这样sun就位于中间位置。设置水星mercury的left值为700px,top为625px,这样水星就位于太阳偏右的位置。然后再设置transform-origin:
transform-origin: -50px 25px;
transform-origin的原点是作用的元素左上角位置,所以往左移(700 � 1300 / 2) = 50px,往下移60 / 2 = 30px(60为水星高度),水星转换的基点就变成了太阳的中心,在此基础上进行旋转:
animation: rotation 2.4s linear infinite;@keyframes rotation{ to{ transform: rotate(1turn); }}
其它的行星,也按照这种方法进行设置,计算稍微繁琐。公转的周期以地球10s为基准,其它按比例换算。这样就可以做出一个太阳系公转的图,原理很简单,效果却很好.
DEMO下载与演示
===============================
CSS3
================================
相关内容
-
计算机主板BIOS设置详细-BIOS知识
计算机主板BIOS设置详细-BIOS知识,,什么是电脑BIOS,一般电脑主...
-
1394连接是什么1394网络适配器知识
1394连接是什么1394网络适配器知识,,今天有网友在QQ群中问了这...
-
盘点20部高分动画电影|儿童动漫电影推荐
盘点20部高分动画电影|儿童动漫电影推荐,标签,钟楼怪人在巴黎...
-
紧追流行游戏!愤怒的小鸟会做出一系列的动画。
紧追流行游戏!愤怒的小鸟会做出一系列的动画。,,愤怒的小鸟是最...
-
从硬件安装到系统安装的计算机知识汇编
从硬件安装到系统安装的计算机知识汇编,,我经常有朋友帮助说如...
-
而不是一个光盘U盘U盘安装系统的原理_电脑知识
而不是一个光盘U盘U盘安装系统的原理_电脑知识,,核心提示:光盘...
-
小米4微信运动怎么设置|怎么让微信运动和小米运
小米4微信运动怎么设置|怎么让微信运动和小米运动,,1. 怎么让...
-
什么是无线局域网无线局域网的基本知识介绍
什么是无线局域网无线局域网的基本知识介绍,, 无线局域网虽然...
-
电脑主板品牌的一些基本知识
电脑主板品牌的一些基本知识,,组装的电脑不再是什么奇怪的事情...
-
an测试动画快捷键|an中的快捷键
an测试动画快捷键|an中的快捷键,,1. an中的快捷键步骤如下:1、 ...
-
保持笔记本电脑的一些知识和技巧
保持笔记本电脑的一些知识和技巧,,笔记本的价格比前些年便宜很...
-
移动硬盘如何使用移动硬盘维护知识
移动硬盘如何使用移动硬盘维护知识,,现在移动硬盘的广泛使用和...
-
小米运动怎么设置|小米运动怎么设置密码
小米运动怎么设置|小米运动怎么设置密码,,1. 小米运动怎么设置...
-
双核CPU知识让你更容易购买
双核CPU知识让你更容易购买,,要买一台双核电脑,首先要了解双核...
-
天猫和淘宝、淘宝、天猫是_计算机知识之间比较
天猫和淘宝、淘宝、天猫是_计算机知识之间比较好,,核心提示:网...