css3怎么画齿轮

html-css024

css3怎么画齿轮,第1张

svg画起来好点。html5也行。其实你何必浪费心思时间在用代码画图呢?第一:代码庞大臃肿。第二:可读性差(这是最要命的)。我个人建议你学习一下Ps或是Fw之类的制图软件。这才是王道。我觉得,真正工作起来,制图才是关键,很少有公司让你用CSS+Html绘图。就是SVG也不过是用来画草稿图的。真心希望你能学好一个绘图软件。

给你提供两种思路:

第一种是使用纯动画的方法,但由于flash动画本身有智能动画渐变,所以如果你只是在第20帧转了360度,动画是不会发生任何运动的,因此你可以在第10帧时将齿轮元件顺时针旋转179度(超过180度智能动画会使他从另一侧转过来),然后再在第20帧转到358度(总的来说就是将动画分成两段,每段旋转的角度刚刚好小于180即可,而实际中由于运动的连贯性,常常角度还可以再小些,调整到整个循环动画齿轮不会卡壳为止)

第二种方法是建议你直接使用代码、在我做动画的时候凡是重复性的(比如下雨)、规则性的(比如车轮旋转)、物理性的(自由落体)能用代码的地方就用代码了,齿轮这个代码其实挺好找的控制大概类似于root.abc.rotation+=1;可以让名字为abc的影片剪辑旋转+1然后把它放入执行动画后将一直重复的代码里中就行了。仅提供思路,因为As2.0和As3.0代码还是有些差别的。(这种情况下基本都可以达到效果,但如果是使用某些播放器可能会存在一些无法编译代码的问题呢~所以看你如何取舍了)

欢迎加我技术交流QQ群 : 811956471

1.本示例中的特色是,纯css写的优惠券齿轮,和中间的虚线;

2.样式类.oilline 用css实现了,中间粗且高亮两端细的渐变线条;

3.css实现容器右上角旋转45度的圆角角标,再也不用ui切图了;

4.补充:由左向右,左边粗,向右渐变变细的线条: