CSS 数据类型 - <time-percentage>

CSS 数据类型 <time-percentage> 表示一个值，该值可以是 <time> 或 <percentage>。

语法

<time-percentage> = <time> | <percentage>

CSS <time> - 有效和无效百分比

以下是有效百分比的列表

百分比	描述
65%
+45%	加号。
-30%	并非所有接受百分比的属性都接受负百分比。

以下是无效百分比的列表

百分比	描述
20 %	% 符号和数字之间不能有空格。

CSS <time> - 有效和无效时间

以下是有效时间的列表

时间	描述
19.6	正整数
-123ms	负整数。
2.6ms	非整数
10mS	虽然不需要使用大写字母，但单位不区分大小写。
+0s	带单位和前导 + 的零
-0ms	零、单位和前导 -

以下是无效时间的列表

时间	描述
0	无单位的零对于 <time> 无效，但对于 <length> 有效。
14.0	这缺少一个单位，因此它是一个 <number> 而不是一个 <time>。
9 ms	数字和单位之间不允许有空格。

CSS <time-percentage> - 在 calc() 中使用的百分比

以下示例演示了在 calc() 函数中使用 <percentage> 数据类型，其中计算了元素的宽度。

<html>
<head>
<style>
   .percal {
      position: absolute;
      width: calc(100% - 140px);
      border: solid black 2px;
      background-color: teal;
      color: white;
      padding: 10px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="percal">
      <h1><percentage> datatype used in calc()</h1>
   </div>
</body>
</html>

CSS <time-percentage> - 在动画中使用的时间

以下示例演示了在动画中使用 <time> 数据类型，其中动画持续时间以时间单位（即 10s）指定。

<html>
<head>
<style>
   .animated {
      width: 100px;
      height: 50px;
      background-color: purple;
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
   }
   
   @-webkit-keyframes pulse {
      0% { -webkit-transform: scale(1.5); }
      50% { -webkit-transform: scale(3.1); }
      100% { -webkit-transform: scale(2); }
   }
   
   @keyframes pulse {
      0% { transform: scale(1.5); }
      50% { transform: scale(3.1); }
      100% { transform: scale(2); }
   }
   
   .pulse {
      -webkit-animation-name: pulse;
      animation-name: pulse;
   }
</style>
</head>
<body>
   <div class = "animated pulse"></div>
</body>
</html>

打印页面