CSS 数据类型

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>s，但是 <length>s 允许使用。
14.0这缺少单位，因此它是 <number> 而不是 <time>。
9 毫秒数字和单位之间不允许有空格。

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> 数据类型的使用，其中动画的持续时间以时间单位指定，即 10 秒。

<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>