css3中过渡和2D变换的学习分享以及简易时钟的实现

本文链接：https://blog.csdn.net/demosoftwa/article/details/114757212

大家好，这里是demo软件园，今天为大家分享的是css3中过渡和2D变换。众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。

CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自行定义。

过渡中有如下属性：
transition-property
指定过渡动画的属性（注意并不是所有的属性都可以动画）
transition-duration
指定过渡动画的时间（注意0也要带单位）
transition-timing-function
指定过渡动画的形式（注意贝塞尔）
transition-delay
指定过渡动画的延迟
transition
第一个可以被解析成时间的值会赋给transition-duration
transtionend事件（DOM2）
在每个属性完成过渡时都会触发这个事件

当属性值的列表长度不一致时：
跟时间有关的重复列表，而transition-timing-function使用默认值。

除了上述，过渡还需要注意以下几点比较重要的坑：

过渡只关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态
元素在初次渲染还没有结束的时候，是没有办法触发过渡的
在绝大部分变换样式的切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的

2D变换（transform）属性允许你修改CSS视觉格式模型的坐标空间，注意：transform 属性 , 只对 block 级元素生效！

rotate
旋转
translate
平移
skew
斜切
scale
缩放
transform-origin
基点的变换
需要注意变换组合的顺序是从右往左的，变换的底层其实就是矩阵的运算。
接下来给大家贴上根据过渡与变换实现的简易时钟，代码如下：

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

效果图：
在这里插入图片描述
好了，今天的分享就到这里，当然，可能存在些许错误望大家海涵并在评论区多多指正交流，谢谢大家花费时间阅览！