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
Best Practices Guide for MySQL Partitioned Tables
Preface: Partitioning is a table design pattern. ...
Detailed steps to enable SourceGuardian (sg11) encryption component on Linux virtual hosts
Note: sg11 Our company only supports self-install...
mysql 5.7.11 winx64 initial password change
Download the compressed version of MySQL-5.7.11-w...
Detailed explanation of the benefits of PNG in various network image formats
BMP is an image file format that is independent o...
Detailed explanation of communication between hierarchical nested components in Vue front-end development
Table of contents Preface Example summary Preface...
Implementation of CSS sticky footer classic layout
What is a sticky footer layout? Our common web pa...
Detailed explanation of where the image pulled by docker is stored
20200804Addendum: The article may be incorrect. Y...
In-depth explanation of Vue multi-select list component
A Multi-Select is a UI element that lists all opt...
WeChat applet to determine whether the mobile phone number is legal example code
Table of contents Scenario Effect Code Summarize ...
Alibaba Cloud Nginx configures https to implement domain name access project (graphic tutorial)
Step 1: Sign a third-party trusted SSL certificat...
10 SQL statement optimization techniques to improve MYSQL query efficiency
The execution efficiency of MySQL database has a ...
A brief discussion on the principle of React two-way data binding
Table of contents What is two-way data binding Im...
Usage scenarios and source code analysis of Vue advanced components functional components
Table of contents introduce Usage scenarios Sourc...
How to install and configure Docker nginx
Download Nginx image in Docker docker pull nginx ...
Design sharing of the download page of the Pengyou.com mobile client (picture and text)
Let's first look at some simple data: Accordin...