纯CSS实现Lavalamp效应的滑动菜单效果

当前位置 : 首页 > 网页制作 > CSS > 纯CSS实现Lavalamp效应的滑动菜单效果

纯CSS实现Lavalamp效应的滑动菜单效果

来源: 作者: 时间:2015-11-15 12:42
下面我们将使用纯css实现滑动菜单效果,使用css3转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子,感兴趣的朋友可以了解
下面我们将使用纯css实现滑动菜单效果,使用css3转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子,感兴趣的朋友可以了解
下面我们将使用纯css实现滑动菜单效果,使用 css3 转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子。
第一步:写在前面的
我们使用了一个叫unicaone的google web字体,在“星形和箭头”示例中我们使用了下面的图片组合

heartandarrow


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

复制代码
代码如下:

<div class="nav ph-line-nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>


复制代码
代码如下:

.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效应发生在这里:

复制代码
代码如下:

.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> *
Tag:
网友评论

<