css3中過渡和2D變換的學習分享以及簡易時鐘的實現

時間 2021-03-13

標籤 javascript css html java css3 app 動畫 code orm htm 欄目 CSS 简体版

原文原文鏈接

你們好，這裏是demo軟件園，今天爲你們分享的是css3中過渡和2D變換。衆所周知，css效率極高，其變化的過程每每都是在一瞬間完成，速度極快。

CSS transition 提供了一種在更改CSS屬性時控制動畫速度的方法。其可讓屬性變化成爲一個持續一段時間的過程，而不是當即生效的。好比，將一個元素的顏色從白色改成黑色，一般這個改變是當即生效的，使用 CSS transitions 後該元素的顏色將逐漸從白色變爲黑色，按照必定的曲線速率變化。這個過程能夠自行定義。javascript

過渡中有以下屬性：
transition-property
指定過渡動畫的屬性（注意並非全部的屬性均可以動畫）
transition-duration
指定過渡動畫的時間（注意0也要帶單位）
transition-timing-function
指定過渡動畫的形式（注意貝塞爾）
transition-delay
指定過渡動畫的延遲
transition
第一個能夠被解析成時間的值會賦給transition-duration
transtionend事件（DOM2）
在每一個屬性完成過渡時都會觸發這個事件css

當屬性值的列表長度不一致時：
跟時間有關的重複列表，而transition-timing-function使用默認值。html

除了上述，過渡還須要注意如下幾點比較重要的坑：java

過渡只關係元素的初始狀態和結束狀態，沒有方法能夠獲取元素在過渡中每一幀的狀態
元素在初次渲染尚未結束的時候，是沒有辦法觸發過渡的
在絕大部分變換樣式的切換時，變換組合的個數或位置不同時，是沒有辦法觸發過渡的

2D變換（transform）屬性容許你修改CSS視覺格式模型的座標空間，注意：transform 屬性 , 只對 block 級元素生效！

rotate
旋轉
translate
平移
skew
斜切
scale
縮放
transform-origin
基點的變換
須要注意變換組合的順序是從右往左的，變換的底層其實就是矩陣的運算。
接下來給你們貼上根據過渡與變換實現的簡易時鐘，代碼以下：css3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			ul{
				list-style: none;
			}
			
			#wrap{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				width: 200px;
				height: 200px;
				border: 1px solid #55aa7f;
				border-radius:50% ;
			}
			ul > li{
				position: absolute;
				left: 99px;
				top: 0;
				width: 2px;
				height: 10px;
				background: #55aa7f;
				transform-origin:center 100px;
			}
			ul > li:nth-child(5n+1){
				height: 15px;
			}
			#wrap > .hour{
				position: absolute;
				left: 97px;
				top: 70px;
				width: 6px;
				height: 30px;
				background: #aaaa00;
				transform-origin: center bottom;
			}
			#wrap > .min{
				position: absolute;
				left: 98px;
				top: 50px;
				width: 4px;
				height: 50px;
				background: #003300;
				transform-origin: center bottom;
			}
			#wrap > .sec{
				position: absolute;
				left: 99px;
				top: 30px;
				width: 2px;
				height: 70px;
				background: red;
				transform-origin: center bottom;
			}
			#wrap > .icon{
				position: absolute;
				left: 90px;
				top: 90px;
				width: 20px;
				height: 20px;
				border-radius:50% ;
				background: #00AA88;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul>
			</ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="icon"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var hourNode = document.querySelector("#wrap > .hour");
			var minNode = document.querySelector("#wrap > .min");
			var secNode = document.querySelector("#wrap > .sec");
			var ulNode = document.querySelector("#wrap > ul");
			var styleNode = document.createElement("style");
			var liHtml = "";
			var cssText="";
			for(var i=0;i<60;i++){
				liHtml+="<li></li>";
				cssText+="ul > li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}";
			}
			ulNode.innerHTML = liHtml;
			styleNode.innerHTML =cssText;
			document.head.appendChild(styleNode);
			move();
			setInterval(move,1000)
			function move(){
				var date = new Date();
				var s = date.getSeconds();
				var m = date.getMinutes()+s/60;
				var h = date.getHours()+m/60;
				hourNode.style.transform="rotate("+(30*h)+"deg)";
				minNode.style.transform="rotate("+(6*m)+"deg)";
				secNode.style.transform="rotate("+(6*s)+"deg)";
			}
		}
	</script>
</html>

效果圖：

好了，今天的分享就到這裏，固然，可能存在些許錯誤望你們海涵並在評論區多多指正交流，謝謝你們花費時間閱覽！app