纯CSS完成Lavalamp效用的拖动菜单实际效果

日期:2021-01-20 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

下面大家将应用纯css完成拖动菜单实际效果,应用 css3 变换和再次建立1般同级连结符挑选器。下面大家将探讨3个简易的事例。
第1步:写在前面的
大家应用了1个叫unicaone的google web字体样式,在“星形和箭头”示例中大家应用了下面的照片组成


第2步:html
3个事例的每一个 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: ⑴2.5%;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; /* the middle of the first <a> */}
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; /* the middle of the second <a> */ }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; /* the middle of the third <a> */}
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; /* the middle of the forth <a> */}


拷贝编码
编码以下:

width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:⑷5px;
}

在每一个状况下,大家将设定左侧距为元素的1半长度,它一直在连接垂直居中悬停,请参考下面的图象:


第3步:深层次细节2
如今,让大家探讨1下带点实际效果。应用“:after”大家将 1px 的水平高宽比线加上到 div.nav。大家还应用“:after”加上了小点点,精准定位在每一个菜单项下面的1行上。Div.effect 如今是1个 10px 的圆,其特性相近于前面的示例中的那些。

拷贝编码
编码以下:

.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #c6342e;
bottom: 40px; }
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
bottom: 38px;
left: 50%;
margin-left: ⑵px;
background: #c6342e;
border-radius: 100%; }
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: ⑸px;
background: #c6342e;
border-radius: 100%; }

第4步:深层次细节3
最终,让大家看1看”心和箭“的示例。”心“由两个元素构成”:before“(心的左半一部分) 和”:after“,”after“的z-index设定为1因此星形在箭头之上,这样就产生了1个穿过心的实际效果:

拷贝编码
编码以下:

left: 50%;
bottom: 20px;
background-position: ⑹2px 0;
height: 20px;
width: 11px;
margin-left: ⑴1px; }
.ph-heart-nav a:after {
z-index: 1;
background-position: ⑺3px 0; }