CSS 数据类型 - time-percentage

上一页
下一页

可以是 <time> 或 <percentage>的值由 CSS 数据类型 <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> 数据类型的使用，其中动画的持续时间以时间单位指定，即 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>
打印本页
上一页
下一页