当前位置:网站首页>如何实现文字动画效果
如何实现文字动画效果
2022-07-06 14:48:00 【Phil Arist】
这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS实现文字动画效果</title>
</head>
<body>
<h1 data-text="正在加载中...">正在加载中...</h1>
</body>
</html>
CSS代码:
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}
h1
{
position: relative;
font-size: 14vw;
color: #252839;
line-height: 1.2em;
text-transform: uppercase;
-webkit-text-stroke: 0.3vw #383d52;
}
h1:before
{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: #01fe87;
overflow: hidden;
-webkit-text-stroke: 0vw #383d52;
border-right: 4px solid #01fe87;
animation: animate 4s linear infinite;
}
@keyframes animate
{
0%,10%,100%
{
width: 0;
}
70%,90%
{
width: 100%;
}
}
写在最后
以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
边栏推荐
- Aardio - 不声明直接传float数值的方法
- 0 basic learning C language - digital tube
- const关键字
- pytorch_YOLOX剪枝【附代码】
- 2022-07-05 stonedb的子查询处理解析耗时分析
- 网络基础入门理解
- HDR image reconstruction from a single exposure using deep CNN reading notes
- pytorch_ Yolox pruning [with code]
- qt quick项目offscreen模式下崩溃的问题处理
- HDR image reconstruction from a single exposure using deep CNNs阅读札记
猜你喜欢
ResNet-RS:谷歌领衔调优ResNet,性能全面超越EfficientNet系列 | 2021 arxiv
3DMax指定面贴图
0 basic learning C language - interrupt
Management background --3, modify classification
That's why you can't understand recursion
Build op-tee development environment based on qemuv8
Chapter 3: detailed explanation of class loading process (class life cycle)
Attack and defense world ditf Misc
Advantages of link local address in IPv6
LeetCode刷题(十一)——顺序刷题51至55
随机推荐
Leetcode question brushing (XI) -- sequential questions brushing 51 to 55
That's why you can't understand recursion
空结构体多大?
OpenCV VideoCapture. Get() parameter details
extern关键字
Build op-tee development environment based on qemuv8
Force deduction question 500, keyboard line, JS implementation
[sciter bug] multi line hiding
Leetcode exercise - Sword finger offer 26 Substructure of tree
Seata aggregates at, TCC, Saga and XA transaction modes to create a one-stop distributed transaction solution
Research and investment strategy report of China's VOCs catalyst industry (2022 Edition)
Chapter 4: talk about class loader again
2021 geometry deep learning master Michael Bronstein long article analysis
中国固态氧化物燃料电池技术进展与发展前景报告(2022版)
Applet system update prompt, and force the applet to restart and use the new version
What are the interface tests? What are the general test points?
Oracle control file and log file management
枚举与#define 宏的区别
新手程序员该不该背代码?
2500 common Chinese characters + 130 common Chinese and English characters