纯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>

上一篇：css 省略号 css3让多余的字符串消失并附加省略号下一篇：CSS中属性Padding的参数个数定义及值的设置

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设