Example of CSS3 to achieve div sliding in and out from bottom to top

1. First, you need to use the target selector of CSS3, and use the a tag to specify the id selector to switch the target element, which is used to select the currently active target element.
2. CSS3 transition animation, which will not be introduced in detail here

Take a look at the effect diagram:

Click the Slide Out button, and the element will slide in from the bottom to a certain height of the page at a constant speed; click Slide In again, and the element will slide in from the current position to the initial position at a constant speed.

Directly on the code:

<h1>CSS3 slide in/out effect</h1>
<div id="volet_clos">
    <div id="volet">
        <p>I used to be so tired, so I just sat there and felt so tired.</p>
        <p>Is it necessary to work hard? Et</p>
        <p>Is it necessary to work hard? Et</p>
        <p>Is it necessary to work hard? Et</p>
        <p>Is it necessary to work hard? Et</p>

        <a href="#volet" aria-hidden="true" class="ouvrir">Slide out</a>
        <a href="#volet_clos" aria-hidden="true" class="fermer">Slide in</a>
    </div>
</div>

 <style>
        #volet_clos {position: fixed;top: 0px; left: 0;width: 100%;}
        #volet {width: 250px;padding: 10px;background: #6B9A49; color: #fff;width: 100%;}
        /* Initial positioning */
        #volet {position: absolute;left: 0px;top: 375px;transition: all .5s ease-in;}   
        #volet a.ouvrir,#volet a.fermer {position: absolute;right: -88px;top: 150px;}
        /* Change target after clicking */
        #volet a.fermer {display: none;}
        #volet:target {left: 0px;top: 150px;}
        #volet:target a.fermer {display: block;}
        #volet:target a.ouvrir {display: none;}
        #volet_clos:target #volet {left: 0px;top: 375px;}
        #volet a.ouvrir,#volet a.fermer{position: absolute;right: calc(40%);top: -40px;padding: 10px 25px; background: #555; color: #fff; text-decoration: none;text-align: center; width: 120px;}
    </style>

Case 2: Tab page switching effect

<h1>Tab page switching effect</h1>
<div class="swiper-box">
    <div class="swiper-cont">
        <div class="swiper1" id="swiper1"></div>
        <div class="swiper2" id="swiper2"></div>
        <div class="swiper3" id="swiper3"></div>
    </div>
    <div class="swiper-num">
        <a href="#swiper1">1</a>
        <a href="#swiper2">2</a>
        <a href="#swiper3">3</a>
    </div>
</div>

/* Tab page switching effect css */
.swiper-box{position: relative;width: 500px; height: 300px; margin: 20px auto; background: #f1f1f1;}
.swiper-cont div,.swiper1,.swiper2,.swiper3{ width: 0%; height: 300px;position: absolute;top: 0; left: 0;transition: width .5s linear;}
.swiper1{background: linear-gradient(to top, #fba555, #ffed6c 75%);}
.swiper2{background: linear-gradient(to left, #55d5fb, #fd74a7 75%);}
.swiper3{background: linear-gradient(to top left, #55fb69, #6cfff1 75%);}
.swiper-num{position: absolute; bottom: 0;right: 0;display: inline-block;z-index: 9;}
.swiper-num a{display: inline-block;margin-left: 10px;padding: 10px 20px; color: #333;font-size: 14px; text-decoration: none;font-weight: bold;background: rgba(255,255,255,.45);}
.swiper-num a:hover,.swiper-num a:active{ color: red; cursor: pointer; background: rgba(255,255,255,.95);}
.swiper-box :target{width: 100%;transition: width .5s linear;}

This is the end of this article about how to use CSS3 to make a div slide in and out from bottom to top. For more information about how to use CSS3 to make a div slide in and out from bottom to top, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Details of Linux file descriptors, file pointers, and inodes

>>: What hidden attributes in the form can be submitted with the form