简易模拟电子围绕原子核运动模型

开发软件和关键技术：DW CSS3 transform的skew属性
作者：坚定的守猴
撰写时间：2019年2月1号
别人都说代码是用来玩的。那今天我就给大家展示一下如何用CSS3中skew的属性将时钟模型给大家变幻出一个有趣的原子模型。代码如下：
一、结构部分

结构还是比较简单的，就是一套嵌一套。这个很容易理解的。下面就到样式部分。
二、样式部分

上面是小球的轨迹部分，就是外层的钟框。
这个是原子核的样式。用skew调整一下角度就可一看起来像个球了。

这两个就是左右两个平面的样式

下面的就是栓住小球转棒的样式，在上面已经提到是用时钟模型来改造的，所以这就相当于时钟的秒针，就是在秒针下面加了一个小球作为电子

这里就是转棒动画函数了

Ok，代码就这么多。就简单提一下，这构造的本质就是把三个简单的时钟模型采用skew倾斜的方式变换出来的。所以核心地方就是skew。这样通过变换一下（变换出来的在原子核那里存在一个小bug，后期会再进行处理一下），一个简易原子模型就诞生了。
效果图如下