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
Sample code for testing technology application based on Docker+Selenium Grid
Introduction to Selenium Grid Although some new f...
Detailed explanation of the usage of image tags in HTML
In HTML, the <img> tag is used to define an...
Detailed Linux installation tutorial
(Win7 system) VMware virtual machine installation...
Detailed analysis of javascript data proxy and events
Table of contents Data Brokers and Events Review ...
Vue project implements file download progress bar function
There are two common ways to download files in da...
How to regularly clean up docker private server images
Using CI to build docker images for release has g...
A brief analysis of the differences between undo, redo and binlog in MySQL
Table of contents Preface 【undo log】 【redo log】 【...
Tutorial on adjusting the size of lvm logical volume partition in Linux (for different file systems such as xfs and ext4)
Preface When we installed the system, we did not ...
Method example of safely getting deep objects of Object in Js
Table of contents Preface text parameter example ...
HTML tag overflow processing application
Use CSS to modify scroll bars 1. Overflow setting...
How to use CSS3 to implement a queue animation similar to online live broadcast
A friend in the group asked a question before, th...
JavaScript timer to achieve seamless scrolling of pictures
This article shares the specific code of JavaScri...
Map the mouse position in CSS and control the page elements by moving the mouse (example code)
Mapping the mouse position or implementing drag e...
MySQL 5.7.20 Green Edition Installation Detailed Graphic Tutorial
First, let’s understand what MySQL is? MySQL is a...
Detailed explanation of MySQL Innodb storage structure and storage of Null values
background: Tablespace: All INNODB data is stored...