HTML + CSS to achieve text folding effect example

Time:2021-7-21

This paper mainly introduces an example of HTML + CSS to realize text folding effect, which is shared with you as follows:

effect:

在这里插入图片描述

realization:

1. Definition label:


 <h1>aurora</h1>

2. Set the basic style of text:


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 capital letters.
letter-spacing: 3px; Word spacing.
transform: rotate(-10deg) skew(30deg); First rotate – 10 DEG, then tilt 30 deg.
-webkit-text-stroke: 2px rgba(0, 101, 253, 0.6); text borderdetailed
transition: all 1s; Transition effect

3. The mouse shows the invagination effect through text:

h1:hover{
           /*First stack the white, then stack the black, the white will cover the black, the white place is bright, the black place is dark*/
            text-shadow:3px 3px 6px #fff,
            3px 3px 6px #fff,
            0 0 0px #000;           
         }

The main method is to use the shadow to stack the white shadow first, and then stack the black shadow behind the white shadow. In this way, the white place is bright, and the black place is dark, forming an invagination effect.

4. Use double pseudo classes to implement the upper part of the text. (Note: Double pseudo classes will inherit some CSS attributes 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; location.
clip-path: inset(0 0 50% 0); Crop. Only the upper part of the text is displayed.
transform: rotateX(0deg) skew(0deg); No rotation, no tilt for the time being.

5. The mouse collapses through the upper part of the text


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

transform: rotateX(-30deg) skew(-30deg); Rotation – 30DEG, tilt – 30DEG.
color: rgb(243, 243, 243); The color darkens.
text-shadow: 0 0 1px black; Shadow.
6. Set up 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, then stack the black, the white will cover the black, the white place is bright, the black place is dark*/
            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 article about html + CSS to achieve text folding effect examples of the article introduced here, more relevant HTML + CSS text folding content, please search the previous article of developer or continue to browse the following related articles, hope you can support developer more in the future!