HTML+CSS to achieve text folding special effects example

This article mainly introduces the example of realizing text folding special effects with HTML+CSS, and shares it with you, as follows:

Effect:

insert image description here

accomplish:

1. Define tags:

 <h1>aurora</h1>

2. Set the basic text style:

h1{
             text-transform:uppercase;
             letter-spacing: 3px;
             font-size: 15vw;
             transform: rotate(-10deg) skew(30deg);
             position: relative;
             color: rgba(0, 101, 253, 0.6);
             -webkit-text-stroke: 2px rgba(0, 101, 253, 0.6);
             transition: all 1s; 
         }

text-transform: uppercase; The letters become uppercase.
letter-spacing: 3px; letter spacing.
transform: rotate(-10deg) skew(30deg); First rotate -10deg, then skew 30deg.
-webkit-text-stroke: 2px rgba(0, 101, 253, 0.6); Text border details
transition: all 1s; transition effect

3. When the mouse passes over the text, the text will be inset:

 h1:hover{
           /* First stack the white layer, then the black layer. The white layer will cover the black layer, making the white area brighter and the black area darker*/
            text-shadow:3px 3px 6px #fff,
            3px 3px 6px #fff,
            0 0 0px #000;           
         }

The main thing is to use shadows to first stack white shadows, and then stack black shadows behind the white. In this way, the white areas are bright and the black areas are dark, forming a sunken effect.

4. Use double pseudo-classes to implement the upper part of the text (Note: double pseudo-classes will inherit some CSS properties of the parent element):

h1::before{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(0 0 50% 0);
             transition: all 1s;     
             transform: rotateX(0deg) skew(0deg);       

         }

position: absolute;
top: 0;
left: 0; Positioning.
clip-path: inset(0 0 50% 0); Crop and display only the upper half of the text.
transform: rotateX(0deg) skew(0deg); Do not rotate or tilt for now.

5. When the mouse moves over the upper part of the text, the text collapses:

 h1:hover::before{
            transform: rotateX(-30deg) skew(-30deg); 
           color: rgb(243, 243, 243);
           text-shadow: 0 0 1px black;
            
         }

transform: rotateX(-30deg) skew(-30deg); rotate -30deg, tilt -30deg.
color: rgb(243, 243, 243); The color becomes darker.
text-shadow: 0 0 1px black; Shadow.
6. Same purpose, set the lower part:

 h1::after{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(50% 0 0 0);
             transition: all 1s;     
             transform: rotateX(0deg) skew(0deg); 
            
         }
         h1:hover::after{
            transform: rotateX(40deg) skewX(20deg) ;
            color: rgb(212, 212, 212);
            text-shadow: 0 0 1px black;
         }

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }   
  
         h1{
             text-transform:uppercase;
             letter-spacing: 3px;
             font-size: 15vw;
             transform: rotate(-10deg) skew(30deg);
             position: relative;
             color: rgba(0, 101, 253, 0.6);
             -webkit-text-stroke: 2px rgba(0, 101, 253, 0.6);
             transition: all 1s; 
         }
         h1:hover{
           /* First stack the white layer, then the black layer. The white layer will cover the black layer, making the white area brighter and the black area darker*/
            text-shadow:3px 3px 6px #fff,
            3px 3px 6px #fff,
            0 0 0px #000;           
         }
         h1::before{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(0 0 50% 0);
             transition: all 1s;     
             transform: rotateX(0deg) skew(0deg);       

         }
         h1:hover::before{
            transform: rotateX(-30deg) skew(-30deg); 
           color: rgb(243, 243, 243);
           text-shadow: 0 0 1px black;
            
         }
         h1::after{
             content: 'aurora';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(50% 0 0 0);
             transition: all 1s;     
             transform: rotateX(0deg) skew(0deg); 
            
         }
         h1:hover::after{
            transform: rotateX(40deg) skewX(20deg) ;
            color: rgb(212, 212, 212);
            text-shadow: 0 0 1px black;
         }
    </style>
</head>
<body>
   
    <h1>aurora</h1>

</body>
</html>

This is the end of this article about the example of using html+css to achieve text folding special effects. For more relevant html+css text folding content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: HTML+CSS to achieve layered pyramid example

>>: CSS polar coordinates example code