16个实用的CSS样式之文本填充

StarAndroid
1,827 阅读5分钟

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟

🏡个人主页：starry陆离

🕒首发日期：2022年9月11日星期日

🌌上期文章：16个实用的CSS样式之悬浮卡片

📚订阅专栏：『16个实用的CSS样式』

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是文本填充加载动画

首先我们来看看最终的效果

css002

2.布局设计

这次的布局超级简单，就是一个文本标题，比较特殊的点就是我们利用data-* 自定义数据属性。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。有这样一个属性使得普通的 HTML 元素也能变成相当复杂且强大的编程对象。

在css中我们可以通过attr() 来获取选择到的元素的某一 HTML 属性值。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/data-* -->
     <h2 data-text="Creative...">Creative...</h2>
 </body>
 </html>

3.样式美化

3.1body美化

body背景色我们设计成黑蓝色，主要是为了与文字填充早成颜色反差，能够吸引眼球。

 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins',sans-serif;
 }
 body{
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background: #252839;
 }

image-20220911154711579

3.2文本美化

接下来就是我们的重头戏了。首先我们还是调整一下文本的大小，这里字体的单位用的是font-size: 14vh;

可能你也和我一样还分不清这些尺寸单位的区别，可详看这篇文章。理解前端尺寸vw、vh、rem、em

简单总结以下就是：vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位

 h2{
     position: relative;
     font-size: 14vh;
     color: #252839;
     /* 文字描边 */
     -webkit-text-stroke: 0.3px #383d52;
     text-transform: uppercase;
 }

image-20220911155740647

然后我们通过attr()用来获取h2元素的data-text属性值(这是我们刚刚自定义的)

最后就是我们的动画控制，首先简单的来讲一下animation

  1. animation-name： 要对当前元素生效的关键帧的名字，如：animation-name: move;
  2. animation-duration： 动画的执行时间，如：animation-duration: 4s;
  3. animation-iteration-count： 动画执行的次数，如：animation-iteration-count: 4，可选值：数字或infinite，其中数字的大小就是执行的次数，而infinite则表示无限次。

  1. animation-timing-function： 指定动画执行的时序函数；

    • linear：动画从头到尾的速度是相同的，匀速变化
    • ease：慢 -> 快 -> 慢
    • ease-in：慢 -> 匀速
    • ease-out：匀速 -> 慢
    • ease-in-out： 慢 -> 匀速 -> 慢

  1. animation-direction： 指定动画运行的方向，可选值如下：

    • normal，默认值，从from到to运行，每次都是这样；
    • reverse，从to到from运行，每次都是这样；
    • alternate，从from向to运行，重复执行动画时会方向执行，即第一个是从from到to，第二次则是从to到from……；
    • alternate-reverse，与alternate的执行时反向的；

  1. animation-play-state： 控制动画的运行状态，可选值如下：

    • running，默认值，动画运行；
    • paused，动画暂停；

  1. animation-fill-mode： 动画的填充模式，可选值如下：

    • none，默认值，动画执行完毕后，元素回到原来的位置；
    • forwards，动画执行完毕后，元素会停止在动画执行结束的位置；
    • backwards，动画延时等待时，元素就会处于开始的位置，即from或to所指定的位置；
    • both，结合了forwards和backwards；
 /* 举例：animation: animate 6s linear infinite; */
 ​
 动画名称 
 animation-name: animate;
 持续时间
 animation-duration: 6s;
 速度曲线
 animation-timing-function: linear;
 重复次数
 animation-iteration-count: infinite;

然后通过关键帧来定义动画序列的动画效果

  • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
  • 在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
 ​
 h2::before{
     /* CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。 
     https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr*/
     content: attr(data-text);
     position: absolute;
     top: 0;
     left: 0;
     width: 0%;
     height: 100%;
     color: #01fe87;
     /* 文字描边 */
     -webkit-text-stroke: 0.3px #383d52;
     border-right: 2px solid #01fe87;
     /* overflow是对溢出内容的处理http://t.csdn.cn/2Z3rf */
     overflow: hidden;
     /* http://t.csdn.cn/U24Nx animation可通过设置多个节点来精确控制
     一个或一组动画常用来实现复杂的动画效果。 */
     animation: animate 6s linear infinite;
 }
 ​
 @keyframes animate{
     0%,10%,100%{
         width: 0;
     }
     70%,90%{
         width: 100%;
     }
 }

4.结语

到此为止一个简单的文本填充加载动画就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。

avatar
文章
阅读
粉丝