CSS圆形旋转效果 纯CSS制作圆形旋转菜单效果(七步完成)

我们理念中的菜单都是矩形的，不是横向排列就是纵向排列，这里我们打破了常规的思维，把菜单做成圆形的。

在这里我们不得不克服几个问题：

如何定义html如何悬停定位菜单元素

在此之前先看一下最终效果是怎样的，DEMO放在前面主要是增加大家阅读的兴趣。

下面就让我们开始今天的教程吧

 第一步：构建HTML

在编写HTML之前，必须先了解将要构建的结构是怎么样的，下图表示要构建的结构：

每个顶部的矩形框都与下面大圆中的一个小圆相联系，当把鼠标悬停在矩形框上时，对应的小圆旋转到菜单的顶部。而实现这个功能的难点就是怎样实现悬停在一个元素上从而影响另一个元素的表现状态。

为解决这个问题，让我们看看下面的HTML：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表