返回
广州小码哥教育
置顶
该校与厚学网暂未合作,平台不保证课程的真实有效性,如有侵权等争议,请及时与厚学网联系处理
招生热线:400-800-2178

学校地址:广州市天河区棠下涌东路大地工业区D栋四楼

小码哥网页UI设计培训课程之个性扇形导航

76 2017-06-22 10:14:17

学习笔记

  小码哥网页UI设计培训课程之个性扇形导航

  小码哥北京ui设计培训课程讲解注重实战应用,对讲述知识点穿插案例制作,使课程内容更加接近工作中实际的项目。小码哥北京ui设计培训的授课老师们风格注重实战经验分析,深受学生喜欢。

  简介:

  对于导航相信大家不会陌生,但是扇形导航见到过,但确不知该如何实现,今天我们分享一款由html5+css3实现的个性扇形导航。

  效果:

  视频:

  网页UI--个性扇形导航视频--上

  网页UI--个性扇形导航视频--下

  技巧:

  制作过程分三步:

  1. 大分区宽度是正方形。

  2.每个扇形宽度和高度为 大分区的一半,且占整个半圆的角度为30度(180/6)。

  3.分区内部文字矫正。宽度和高度应是 大分区的宽度和高度。

  总体过程分为三步。

  注意细节:

  1.扇形形成30度角(90-60),使用transform:rotate(0deg) skew(60deg);并且,要先旋转再进行斜切。如图示

  2.要进行旋转时,要将转换中心指 定为右下角transform-origin:百分之一百 百分之一百;

  3.指 定文本(a标签)进行正确显示,要将变为正方形,再进行旋转到一定的角度即可。

  激发你的设计潜力,引领你发现奇妙的设计世界,智慧与艺术的结合,也许你就是下一个传奇设计师。赶紧入我们吧。地址:广州市天河区棠下涌东路大地工业区D栋四楼 官网http://www.520it.com 


文中图片素材来源网络,如有侵权请联系删除
来源:广州小码哥教育
热门课程 全部课程

热门动态

申请免费试听

只要一个电话

我们为您免费回电

立即申请
刷新
图形验证
关闭
>>
拖动左边滑块完成上方拼图