纯CSS实现Lavalamp效应的花式菜单效果

来源：自学PHP网时间：2015-04-14 14:50 作者：阅读:次

[导读] 下面我们将使用纯css实现滑动菜单效果，使用 css3 转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子。第一步：写在前面的我们使用了一个叫unicaone的google web字体...

下面我们将使用纯css实现滑动菜单效果，使用 css3 转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子。

第一步：写在前面的

我们使用了一个叫unicaone的google web字体,在“星形和箭头”示例中我们使用了下面的图片组合

第二步：html

三个例子的每个 html 是相同的。我们将只是切换名为ph-line-nav的class到ph-dot-nav和ph-heart-nav.

[html]

<a href="#">About</a>

<a href="#">Gallery</a>

<a href="#">Contact</a>

</div>

第三步：所有例子的共同CSS

下面是三个示例的共同css，需要强调的是div.nav的position是relative，<a>是float:left;

下面是省略了前缀的css

[css]

.nav {

overflow: hidden;

position: relative;

width: 480px; }

.nav a {

display: block;

position: relative;

float: left;

padding: 1em 0 2em;

width: 25%;

text-decoration: none;

color: #393939;

transition: .7s; }

.nav a:hover {

color: #c6342e; }

关键的部分lavalamp-like效应发生在这里:

[css]

.effect {

position: absolute;

left: -12.5%;

transition: 0.7s ease-in-out; }

.nav a:nth-child(1):hover ~ .effect {

left: 12.5%; /* the middle of the first <a> *

更多文章推荐