大家好,这里是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>
效果图:
好了,今天的分享就到这里,当然,可能存在些许错误望大家海涵并在评论区多多指正交流,谢谢大家花费时间阅览!