Detailed explanation of the text-fill-color property in CSS3
|
What does text-fill-color mean? Just from the literal meaning, it means "text fill color", but it actually also sets the fill color of the text in the object, which is very similar to the effect of color. If you set both the text-fill-color and color properties at the same time, text-fill-color will override the color value. Since text-fill-color is a new attribute of CSS3, when it comes to new attributes of CSS3, everyone will definitely ask about its compatibility effect? ? Hey, I can only say mercilessly that the compatibility is very poor. It is only effective for browsers with the WebKit kernel. . What a pity! ! Although it has poor compatibility, it can produce very cool text effects, such as flowing text, hollow text, etc. To create flowing text, you can't just use text-fill-color. You also need to combine CSS3 animation to achieve the animation effect. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
._borderWrap{
width: 180px;
height: 150px;
position: absolute;
left: 23%;
top: 25%;
}
._border{
line-height: 145px;
text-align: center;
font-size: 40px;
font-weight: bold;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
background-size: 200%,100%;
-webkit-background-clip: text;
-webkit-animation: word 5s linear infinite;
}
@keyframes word {
0%{background-position: 0 0}
100%{background-position: -100% 0}
}
</style>
</head>
<body>
<div class="_borderWrap">
<div class="_border">Your name</div>
</div>
</body>
</html>Effect picture:
"Your name" is the flowing text I made, but the screenshot is static. If you want to see the dynamic effect, you need to run the code yourself! Note that there are several key points in making flowing text: text-fill-color is generally set to transparent, and then use background-image and gradient colors to set the background color of the text, use background-clip to achieve text capture, and then use background-size to expand the background, so that the animation effect can be achieved when using animation. Summarize The above is the text-fill-color attribute in CSS3 that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Web developers are concerned about the coexistence of IE7 and IE8
>>: How to deploy hbase using docker
Recommend
How to implement Nginx reverse proxy and load balancing (based on Linux)
Let's try out nginx's reverse proxy here....
Detailed examples of float usage in HTML/CSS
1. Basic usage examples of float 1. Let's fir...
JavaScript implements the nine-grid mobile puzzle game
This article shares the specific code for JavaScr...
Getting Started with Mysql--sql execution process
Table of contents 1. Process 2. Core Architecture...
Specific method of viewing user authorization information in mysql
Specific method: 1. Open Command Prompt 2. Enter ...
The handler PageHandlerFactory-Integrated has a bad module ManagedPipelineHandler in its module list
When developing a web project, you need to instal...
Detailed explanation of application scenarios of filters in Vue
filter is generally used to filter certain values...
Detailed explanation of downloading, installing and using nginx server
download http://nginx.org/en/download.html Unzip ...
Detailed explanation of MySQL covering index
concept If the index contains all the data that m...
Summary of Vue 3 custom directive development
What is a directive? Both Angular and Vue have th...
Specific use of MySQL segmentation function substring()
There are four main MySQL string interception fun...
Detailed explanation of Xshell common problems and related configurations
This article introduces common problems of Xshell...
Detailed explanation of Vuex overall case
Table of contents 1. Introduction 2. Advantages 3...
The process of installing MySQL 8.0.26 on CentOS7
1. First, download the corresponding database fro...
N ways to center elements with CSS
Table of contents Preface Centering inline elemen...