纯CSS实现Lavalamp效应的滑动菜单效果
建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
狼蚁网站SEO优化我们将使用纯css实现滑动菜单效果，使用 css3 转换和重新创建一般同级连结符选择器。狼蚁网站SEO优化我们将讨论三个简单的例子。
第一步：写在前面的
我们使用了一个叫unicaone的google web字体,在“星形和箭头”示例中我们使用了狼蚁网站SEO优化的图片组合
第二步：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> *
第一步：写在前面的
我们使用了一个叫unicaone的google web字体,在“星形和箭头”示例中我们使用了狼蚁网站SEO优化的图片组合
第二步：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> *