Sometimes we need to put a form of customer help on the sidebar of the website. At first, we need to put a button there and click it to slide the content. In general, we will use js to control this effect. Now CSS3 can do the same.
How is this done? The target tag in CSS3 is used.
I have previously written an animation similar to target. For example, the two production solutions of CSS3 accordion are awesome CSS3 slide effects.
Let's take a look at the implementation of this animation.
1. Fix the box in a certain position.
2. Hide the form and show only one click button.
3. When the button is clicked, the form is drawn and the button text changes.
4. Click the button again to indent the form.
We can see that there are two steps, one for one and one for indentation. If we want to use: target, we need two targets. Otherwise, two actions cannot be completed. Of course, you can consider using the checked label mentioned in the accordion case. I won't talk about it here.
HTML code
| The code is as follows: |
Copy code |
<Div id = "volet_clos">
<Div id = "volet">
<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis. </p>
<P> maid? Et </p> <A href = "# volet" aria-hidden = "true"> slip out </a>
<A href = "# volet_clos" aria-hidden = "true"> Slide in </a>
</Div>
</Div> |
CSS code
| The code is as follows: |
Copy code |
# Volet {
Width: 250px;
Padding: 10px;
Background: #6B9A49; color: # fff;
} # Volet a. ouvrir,
# Volet a. fermer {
Padding: 10px 25px;
Background: #555;
Color: # fff;
Text-decoration: none;
} # Volet {
Position: absolute;
Left:-270px;/* test fixed + scroll, on retire la position top */
-Webkit-transition: all. 5 s transfer-in;
-Moz-transition: all. 5 s transition-in;
Transition: all. 5 s transfer-in;
}
# Volet a. ouvrir,
# Volet a. fermer {
Position: absolute;
Right:-88px;
Top: 150px;
-Webkit-transform: rotate (270deg );
-Moz-transform: rotate (270deg );
-O-transform: rotate (270deg );
-Ms-transform: rotate (270deg );
-Moz-radius: 0 0 8px 8px;
Border-radius: 0 0 8px 8px;
}
# Volet a. fermer {
Display: none;
}
# Volet: target {
Left: 10px;
} /* Code pour la fermeture */ # Volet: target a. fermer {
Display: block;
}
# Volet: target a. ouvrir {
Display: none;
}
# Volet_clos: target # volet {
Left:-270px;
} /* Test fixed + scroll */
# Volet_clos {
Position: fixed;
Top: 55px; left: 0;
} |
If you use: checked, it will become simple. What would you do?
| The code is as follows: |
Copy code |
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> slide-in and out Animation </title>
<Style type = "text/css">
<! --
Body {
Margin: 0; padding: 10px 40px;
Background: # F1EFE2;
Font-size: 1.4em;
Font-family: georgia, "trebuchet ms", arial, serif;
Height: 3000px;/* test fixed + scroll */
}
H1 {
Margin-top: 20px; margin-bottom: 40px;
Color: #345;
Text-shadow: 1px 1px 1px # fff;
}
H2 {
Color: #678;
Text-shadow: 1px 1px 1px # fff;
Font-size: 1.1em
} /* Code du tutoriel ci-dessous */ # Volet {
Width: 250px;
Padding: 10px;
Background: #6B9A49; color: # fff;
}
# Volet a. ouvrir,
# Volet a. fermer {
Padding: 10px 25px;
Background: #555;
Color: # fff;
Text-decoration: none;
} # Volet {
Position: absolute;
Left:-270px;/* test fixed + scroll, on retire la position top */
-Webkit-transition: all. 5 s transfer-in;
-Moz-transition: all. 5 s transition-in;
Transition: all. 5 s transfer-in;
}
# Volet a. ouvrir,
# Volet a. fermer {
Position: absolute;
Right:-88px;
Top: 150px;
-Webkit-transform: rotate (270deg );
-Moz-transform: rotate (270deg );
-O-transform: rotate (270deg );
-Ms-transform: rotate (270deg );
-Moz-radius: 0 0 8px 8px;
Border-radius: 0 0 8px 8px;
}
# Volet a. fermer {
Display: none;
}
# Volet: target {
Left: 10px;
} /* Code pour la fermeture */ # Volet: target a. fermer {
Display: block;
}
# Volet: target a. ouvrir {
Display: none;
}
# Volet_clos: target # volet {
Left:-270px;
}
/* Test fixed + scroll */
# Volet_clos {
Position: fixed;
Top: 55px; left: 0;
}
-->
</Style>
</Head>
<Body>
<H1> slide in and out <H2> click it to hide it
<Div id = "volet_clos">
<Div id = "volet">
<P> Lorem Elsass ipsum r Mao chime amet sed bissame so libero. DNA, leo Richard? Schirmeck tellus </p>
<P> Wurscht elementum semper tellus s 'guelt Pfourtz ?! </P>
<A href = "# volet" class = "ouvrir" aria-hidden = "true"> slide-out </a>
<A href = "# volet_clos" class = "fermer" aria-hidden = "true"> slide </a>
</Div>
</Div> </Body>
</Html> |
