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

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

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

来源: 作者: 时间:2016-02-17 10:24
下面我们将使用纯css实现滑动菜单效果, 使用 css3 转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子。第一步:写在前面的我们使用了一个叫unicaone的google web字体
下面我们将使用纯css实现滑动菜单效果, 使用 css3 转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子。
第一步:写在前面的
我们使用了一个叫unicaone的google web字体,在“星形和箭头”示例中我们使用了下面的图片组合
heartandarrow
第二步:
三个例子的每个 html 是相同的。我们将只是切换名为ph-line-nav的class到ph-dot-nav和ph-heart-nav.
[html] 
<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>  
 
第三步:所有例子的共同
 
下面是三个示例的共同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 {  
网友评论

<