【每日一练】20—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%;}
}
写在最后
以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号
【每日一练】20—CSS实现文字动画效果相关推荐
- CSS实现文字动画效果【每日一题】
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <htm ...
- CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...
- 如何实现文字动画效果
这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <html> ...
- CSS实现文字镂空效果炫酷背景效果
CSS实现文字镂空效果炫酷背景效果 css3中的mix-blend-mode css3中有一个mix-blend-mode的screen混合模式,可以轻松实现镂空文字效果.背景我们可以固定定位设置一个 ...
- HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白 一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
- css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗 今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
- 【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开 效 ...
- html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗 今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
- JavaScript网页特效-浮现社会主义核心价值观文字动画效果
1.案例呈现 用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...
最新文章
- 划重点了!网络推广网站在建设时期该如何进行优化?
- 省市地区表 mysql数据库
- 链路层的网卡聚合-基于Linux bonding
- Spark RDD创建操作
- 文件描述符与打开文件的关系
- 支付宝用大数据憋死伪基站骗子
- java webpack web项目_零基础如何学习web前端,入门教程分享
- rocketmq linux环境下载地址,Linux下RocketMQ下载安装教程
- [从架构到设计]第一回:设计,应该多一点
- python列表连接_Python连接列表
- POJ 2142 The Balance ★ (不定方程 ax+by=c 的|x|+|y|最小解)
- 326.是否为3的平方根 IsPowerOfThree
- visio一分二的箭头_Visio如何画各种线条与箭头?
- 使用geohash实现查找附近的人
- GitHub + PicUloader + jsDelivr : 通过 web 上传的免费图床和图像访问 CDN 加速
- Python爬虫(第三周)
- 集合框架·List集合简介
- future cancel失败一例
- 1.2 行列式的性质和计算
- 02-CPU基础知识:通俗易懂方式理解主频、核心、线程、缓存、架构