巧妙利用CSS3实现太阳系行星公转运动轨迹
前段时间在博客园看到一篇很不错的文章,就是介绍如何用CSS3来实现太阳系中行星的运动。本×××处于好奇心从头到完整的看完了。突然发现好奇不仅仅害死猫,也可以增长知识嘛(你这是什么谬论!!!)。也许有的朋友看过有关的文章那么今天我们就一起来看看怎么巧妙的利用CSS3 来实现这么漂亮的动画的吧!
我不清楚大家对于CSS3的动画了解多少,但是我对于 CSS3的东西还是限制与用什么查什么的阶段。css3的animation动画,结合transform的大小、旋转、位移、斜切,通过两三行代码,便可做出很多有趣的效果。
看不到动态图的请点击以下图片应该就可以看到了
这篇文章我很早就想分享出来了,但是你们都知道我那么懒,(懒癌晚期了已经)。 在端午节之前我就自己写好了demo,但是每次回家都玩狗,压根不去开电脑。你们肯定在想没救了这人……
废话不扯了,我和别人的写法可能不一样,下面按照我的思路给大家介绍这个动画吧。
第一、动画实现的思路
在日常写项目的时候不管是大到后台的系统管理,还是小到一个宣传的单页,我都会先拿来分析一下再去着手制作(PS: 刚上班的时候有项目来就赶紧写,从来不把整个需求看完,结果就是全部从写,所以磨刀不误砍柴工,把我的惨痛经验送给初学者们)。
下面我们一起来分析一下这个动画的思路
看图片我们知道这个是一个旋转动画所以我们会用到 CSS3 transform
所有行星旋转围绕的中心都是太阳,而默认的都是自己的重心但是这里我们需要都是太阳 transform-origin (这个是重点)
@keyframes rotation 这个就是最后一步,当布局完成我们就可以加上动画了
第二、太阳系的HTML
接下来讨论太阳系的制作,跟上面不同的地方是行星是围绕着太阳转的,而轮子是围绕着自己的圆心转的,也就是说他们转的基点不同。可以看出,transform的基点默认是本身的中心center,所以我们要改变行星的进行转换的中心点transform-origin。太阳系的html结构如下:
class为 *-mercury-track 是行星的运行轨道
<div class="galaxy"><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
================================
转载于:https://blog.51cto.com/aliyue/1791454
巧妙利用CSS3实现太阳系行星公转运动轨迹相关推荐
- css3运动后留下轨迹尾巴_巧妙利用CSS3实现太阳系行星公转运动轨迹
巧妙利用CSS3实现太阳系行星公转运动轨迹 前段时间在博客园看到一篇很不错的文章,就是介绍如何用CSS3来实现太阳系中行星的运动.本小姐处于好奇心从头到完整的看完了.突然发现好奇不仅仅害死猫,也可以增 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- 实现太阳系行星公转动画实例(CSS+HTML5 源码)
实现太阳系行星公转动画实例(CSS+HTML5 源码) 效果图 源代码(CSS+HTML5) 效果图 源代码(CSS+HTML5) <html> <head> <styl ...
- 用CSS3制作太阳系行星运动简图
CSS3的小实验 本文章仅仅是对基础的CSS3进行讲解,更加详细的内容均会附上链接,以便查阅和版权保护. 快一个月没更新博客了,期中考试的那些题也没什么好说的必要,,,,今天想着期中考试忙的差不 ...
- html+div+动画效果,html+css3太阳系行星运转动画效果的实现代码
原标题:html+css3太阳系行星运转动画效果的实现代码 做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星 ...
- css3 3d 太阳系,使用css3的动画模拟太阳系恒星公转
原标题:使用css3的动画模拟太阳系恒星公转 本文介绍使用css3的animation画一个太阳系恒星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际 ...
- 【CSS】模拟太阳系行星的公转
前言 上一篇纯CSS实现日地月的公转挖下了一个坑--模拟太阳系行星绕太阳的公转,今天我来填坑了. 太阳系现在只有八大行星:水星.金星.地球.火星.木星.土星.天王星和海王星.原来还有冥王星,但因为在第 ...
- 150行Python代码模拟太阳系行星运转
今天我们用Python来模拟一下太阳系行星运动轨迹玩玩~ 先上成品图(运行效果含音乐的呦) 想要实现这样的效果并不难 1.准备材料 首先我们需要准备这样一些材料 宇宙背景图 背景透明的行星图 2:编写 ...
- 用html+ccs3就能 做出一个太阳系行星
2019独角兽企业重金招聘Python工程师标准>>> 做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括 ...
最新文章
- 单件模式Singleton Pattern
- vue编写messageBox,使用函数调用
- python终端指令大全_使用python模拟命令行终端的示例
- 高质量SQL的30条建议!(后端必备)
- appSettings 配置mysql_app.config数据库配置字符串的三种取法
- 如何检查Java中是否存在文件
- 【渝粤教育】电大中专建筑力学 (2)作业 题库
- 用matlab模拟3电荷,基于Matlab模拟点电荷电场线和等势线
- Java Web学习视频
- java8新特性及汪文君Google Guava项目实战
- Android音视频开发之ExoPlayer(二):播放列表常用的功能
- 前端主流IDE快捷语法
- roundcube db.inc.php,Webmail Roundcube安装配置基础教程
- 定时备份网站数据文件到阿里网盘
- Rxjava的背压策略
- C语言中的带参宏和带参函数的区别
- Android 适配Dark Theme(暗黑模式),看完跪了
- Visual Studio 实用插件推荐
- C/C++编程:reference to non-static member function must be called
- JavaWeb基础04: JavaScript