阅读 31

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

大家好,这里是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>

复制代码

效果图:

在这里插入图片描述

好了,今天的分享就到这里,当然,可能存在些许错误望大家海涵并在评论区多多指正交流,谢谢大家花费时间阅览!

文章分类
前端
文章标签