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:
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. 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; 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.
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
Recommend
mysql5.7.22 download process diagram
1. Go to the official website www.mysql.com and s...
Use scripts to package and upload Docker images with one click
The author has been working on a micro-frontend p...
MYSQL uses Union to merge the data of two tables and display them
Using the UNION Operator union : Used to connect ...
Architecture and component description of docker private library Harbor
This article will explain the composition of the ...
KVM virtualization installation, deployment and management tutorial
Table of contents 1.kvm deployment 1.1 kvm instal...
A graphic tutorial on how to install MySQL in Windows
Abstract: This article mainly explains how to ins...
Linux CentOS MySQL database installation and configuration tutorial
Notes on installing MySQL database, share with ev...
Nginx location matching rule example
1. Grammar location [=|~|~*|^~|@] /uri/ { ... } 2...
JavaScript CollectGarbage Function Example
First, let's look at an example of memory rel...
Ubuntu 18.04 does not prompt for password when installing MySQL and how to solve it
The installation of MySQL 5.7 on Ubuntu 1804 is i...
How to build a Vue3 desktop application
In this article, we will look at how to develop a...
Detailed explanation of the setting of background-image attribute in HTML
When it comes to pictures, the first thing we thi...
Detailed explanation of creating, calling and managing MySQL stored procedures
Table of contents Introduction to stored procedur...
Introduction to common commands and shortcut keys in Linux
Table of contents 1 System Introduction 2 System ...
Analysis of the process of publishing and deploying Spring Boot applications through Docker
Table of contents Manual deployment 1. Create a s...