纯CSS3完成翻转的齿轮动漫实际效果

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

纯CSS写的齿轮实际效果。适用chrome,firefox,较为不光滑。各位见谅,期待你能看到的是观念,而并不是技术性的物品。

实际效果预览:

基本原理的话也较为简易,关键是css3画圆,随后弄出几个轮子的齿(这里搭建锯齿的方式是我本人较为令人满意的地区,便是用1个贯穿全部圆形的长条,随后transform:rotate1定的度数,随后依照规律性写下去,1个轮子就出来了。假如融合js做的话,能保证更多更细致的实际效果),随后画出两个轮子。用keyframes(重要帧)得出动漫实际效果。1个顺时针1个逆时针,设定好翻转時间,并没有限翻转(infinite)。ok,告1段落。看下面实际效果:


提醒:您能够先改动一部分编码再运作


关键用到了transform开展转动,keyframes重要帧实际效果。原本准备写个繁杂的联动齿轮的,但是确实是懒得折腾了。哪位童鞋写好后在这里吱1声吧。。。