        
            培训首页
        
         > 
        网页设计师新闻
         > 
        小码哥网页UI设计培训课程之个性扇形导航
    

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

[2017-06-21 17:48:34] 浏览量：74 来源：

广州小码哥教育

　　小码哥北京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

文中图片素材来源网络，如有侵权请联系删除

学习目标：

您的基础：

学习方式：

更多>>