Use pure CSS to implement the fancy menu effect of the Lavalamp Effect

Next we will use pure css to achieve the sliding menu effect, use css3 to convert and recreate the common same level link character selector. Below we will discuss three simple examples. Step 1: We used a google web font named unicaone. In the "Star and arrow" example, we used the following picture combination Step 2: each html in the three examples of html is the same. We will just switch the class named ph-line-nav to ph-dot-nav and 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> Step 3: the common CSS of all examples below is the common css of the three examples, which must be emphasized by div. the position of nav is relative, <a> float: left; The following is css [css] With the prefix omitted. nav {overflow: hidden; position: relative; width: 480px ;}. nav a {display: block; positi On: relative; float: left; padding: 1em 0 2em; width: 25%; text-decoration: none; color: #393939; transition :. 7 s ;}. nav a: hover {color: # c6342e;} the key part of the lavalamp-like effect occurs here: [css]. effect {position: absolute; left:-12.5%; transition: 0.7 s extract-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> */} when the mouse moves to element a, div. effect moves to the middle of it. Here we need to understand the transition-timing-function (here). Here we use the transfer-in-out function. Step 4: go into detail 1. Let's start with the simplest example, which is the effect of the first slide line in the demo. You only need to define the line size and color and vertical position. [Css]. ph-line-nav. effect {width: 90px; height: 2px; bottom: 36px; background: # c6342e; box-shadow: 0 1px 0 white; margin-left:-45px ;} in each case, we will set the left margin to half the length of the element, which is always hovering in the center of the link. See the following image: Step 5: Go to details 2 now, let's take a look at the effect. Use ": after" to add the horizontal height line of 1px to div. nav. We also used ": after" to add a dot and locate it on a row under each menu item. Div. effect is now a 10 PX circle, and its attributes are similar to those in the previous example. [Css]. 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: -2px; background :# c6342e; border-radius: 100% ;}. ph-dot-nav. effect {width: 10px; height: 10px; bottom: 36px; margin-left:-5px; background :# C6342e; border-radius: 100%;} Step 6: Go to details 3. Finally, let's take a look at the examples of "Heart and arrow ." The heart "consists of two elements": before "(left half of the heart) and": after "," after ", the z-index is set to 1, so the star is on the arrow, in this way, the effect of passing through the heart is formed: [css]. ph-heart-nav. effect ,. ph-heart-nav a: after ,. ph-heart-nav a: before {background: url ('.. /images/heart.png ') no-repeat ;}. ph-heart-nav. effect {position: absolute; bottom: 26px; background-position: 0 0; height: 8px; width: 62px; margin-left:-31px ;}. ph-heart-nav a: before ,. ph-heart-nav a: after {content: ""; display: block; position: absolute; left: 50%; bottom: 20px; background-position:-62px 0; height: 20px; width: 11px; margin-left:-11px ;}. ph-heart-nav a: after {z-index: 1; background-position:-73px 0 ;}