CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习。
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>【每日一练】20—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%;
}
}
写在最后
以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
CSS实现文字动画效果相关推荐
- CSS实现文字动画效果【每日一题】
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <htm ...
- 【每日一练】20—CSS实现文字动画效果
写在前面 今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是 ...
- 如何实现文字动画效果
这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <html> ...
- 【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开 效 ...
- CSS实现文字镂空效果炫酷背景效果
CSS实现文字镂空效果炫酷背景效果 css3中的mix-blend-mode css3中有一个mix-blend-mode的screen混合模式,可以轻松实现镂空文字效果.背景我们可以固定定位设置一个 ...
- 点击页面弹出文字动画效果
点击页面弹出文字动画效果 introduce 在博客园查询资料的时候,经常会有一些小的惊喜,比如点击页面,会弹出一些文字,向上浮动,然后消失,显得无聊,我就做了一个demo tool 首推vscode ...
- 点击页面出现富强、民主这类文字动画效果
一.文字动画效果预览 点击本页面任意位置即可!因为动画效果用的是CSS3 animation,因此,IE9及其以下浏览器无效果. 二.如何在自己网站上添加类似效果? 复制并粘贴下面的内联CSS代码到页 ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- css有哪些动画效果怎么实现的
css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画 transition ...
最新文章
- python中字符串的rstrip()方法
- 异构系统数据备份解决方案
- .net 导出excel和word
- Python Django 前后端数据交互 之 HttpRequest、HttpResponse、render、redirect
- 关于Mybatis的各种配置文件
- hdu 4602 Partition
- sqlserver 查看进程以及查看死锁代码
- java7优化,七、索引优化分析
- 计算bom的准确用量
- 2018/7/13-纪中某C组题【jzoj3382,jzoj3383,jzoj3384,jzoj3385】
- JAVA入门级教学之(内存地址的引用示例)
- Python笔记-假设检验之单样本T检验
- 基于vue单页应用的例子
- 《Spring Data实战》——导读
- 小艾机器人apk_小艾QQ群机器人安卓版
- android+自定义跑马灯,android自定义View实现跑马灯效果
- 实验六 视图的创建与管理
- 1:500城镇地形图测绘已正式启动
- 斗破苍穹hd和java版区别_《斗罗大陆》和《斗破苍穹》的区别有哪些?
- 奔走相告!2020阿里云618年中大促火爆来袭!