这期我们来一起探讨如何用线条勾勒出一个简单的地球仪。废话不多说动手!!!
想要用线条勾勒出一个简单的地球仪,首先我们就得想到如何形成一个线条。这边我分享一下我的方法(用边框)
然后使用border-radius这个属性,让一个正方形的边框变成一个圆形这样的话,我们就可以进行下一步动作了。
注意:这边的容器不要设置背景颜色就让他单独形成一个圆形。效果图如下:
这边你会看打这个球形为什么会和平常看到的不一样,这个问题问的非常好。因为我给他加了旋转属性rotate。
首先我们要先通过transform-style: preserve-3d;这个属性让div变成一个3d舞台然后在设置transform:rotateX()属性和transform:rotateY()属性来实现他的翻转。
我这边是这样设置的:
接下来我们就要思考一个问题了,实现一个地球仪要多少个这样的线条,没错就是18条。经度需要9条,纬度需要9条。当然你也可以设置6条这边就看你个人爱好。
先设置9条绕着X轴旋转的,然后在设置9条绕着Y轴旋转的。这样就以来地球仪基本就做好了如图:
是不是感觉有点字小帅就和我一样。然后接下来我们就要实现让他自动转起来。
首先我们需要制定一个关键帧。这边我是这样制定的:
要用到@keyframes 这个属性后面接的是这个关键帧的名称(zhuan)0%的意思是开始状态,然后100%是结束状态。我写的意思就是让这个球绕着Z轴转一圈。就犹如地球仪转一圈一样。
然后我们做到这里几乎就完成了制作了完成了,现在就差最后一步了,就是调用这个关键帧。用到animation这个属性。
animation属性它的属性值就比较多了 不过常用的就是几种,上述的是合并写法,属性值用空格隔开。
第一个值就是调用的关键帧的名称了,然后呢第二个值就是 完成这个关键帧所需要的时间(我这边设置的是十秒),第三个值就是这个动画执行的类型linear也是常用到的类型,指的是匀速。
然后最后一个值的意思是infinite无限循环。好了做到这里就做完了。点击运行你会发现。
就是这样没错,不过你得脑补他是在绕着Z轴转动的。希望你能理解!
这一期就和大家分享这么点了,下期再见!!