Stacked Paper arranging animation using HTML and CSS

Hello coders,

Today we will learn to code stacked paper arrangement animation, write your code in any editor save both the file separately don’t forget to link the CSS file with the HTML file or you may write the styling code in an HTML file under style tag.

copy and paste these simple coding lines and see the magic

HTML Code:

<!DOCTYPE html>
<html lang="en">
<!--www.codeithub.com-->
<head>wA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stacked paper</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="letter">
        <p>Arranging a messy stack of papers using CSS transforms.</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt, alias?</p> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, temporibus. Laudantium fuga cum explicabo placeat!</p>
        <h1>HOVER ME</h1>
      </div>
</body>
</html>

CSS Code:

html {
    margin: 0px;
    box-shadow: inset 0 0 110px #000000e6;
    background: radial-gradient(circle at 50% 0%,#e1e1e1 10%,#5a7cc5);
    height: 100%;
    width: 100%;
    overflow-x: hidden;
   }
   
   body {
    margin: 0px;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
   }
   
   h1 {
       margin: 40px 0 0;
       text-align: center;
   }
   
   .letter {
       background: #fafafa;
       box-shadow: 0 0 10px #0000004d, 0 0 300px 25px #dbd0adb3 inset;
       width: 225px;
       height: 320px;
       margin: 1.5% 50% auto;
       left: -220px;
       padding: 24px;
       position: relative;
   }
   
   .letter:before, .letter:after {
       content: "";
       background: #fafafa;
       box-shadow: 0 0 8px #00000033, inset 0 0 300px #dbd0adb3;
       height: 100%;
       width: 100%;
       position: absolute;
       z-index: -2;
       transition: .5s;
   }
   
   .letter:before {
       left: -5px;
       top: 2px;  
       transform: rotate(-1.4deg);
   }
   
   .letter:after {
       right: -3px;
       top: 0px;
       transform: rotate(2.4deg);
   }
   
   .letter:hover:before {
   transform: rotate(0deg);
   border: solid #6f633d66;
   border-width: 0px 0px 0px 1px;
   left: -6px;
   top: -6px; 
   }
   
   .letter:hover:after {
   transform: rotate(0deg);
   border: solid #6f633d66;
   border-width: 0px 0px 0px 2px;
   right: 3px;
   top: -3px;
   }
   

OUTPUT

See also  Facebook Post Posting in HTML CSS & JavaScript

EXAMPLES:

Glowing Effect on Buttons using HTML and CSS

Blog Card Slider using HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *