你的位置:首页 > 网页设计

[网页设计]css3 transition animation nick


时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩!

转换

转换属性transform:

浏览器前缀:
-webkit-transform;-o-transform;-moz-transform;-ms-transform;
取值:
none : 默认值,没有转换操作
transform-function:一组转换函数
transform:函数1() 函数2() ......;

转换的原点transform-origin

在不指定原点前提前,默认原点为元素的中心处
取值:数值/百分比/关键字
一个值:所有轴位置
两个值:表示x轴和y轴
三个值:表示x轴,y轴,z轴

2D转换

2D位移

函数:translate()
取值:
translate(x) : 只做x轴(横向)移动
translate(x,y) : 做x轴和y轴的移动
方向:看符号

+ 向右、向下
- 向左、向上

注意:

取值可以为数值或百分比、负数
单向位移函数:
translateX(x) : 只做x轴移动
translateY(y) : 只做y轴移动

缩放

改变元素的尺寸
函数:scale()
取值:
1个值:表示第一个值和第二个值是相等的
2个值:第一个 x 第二个 y
单向缩放函数:
scaleX(x),scaleY(y)
取值:
默认值 为1
缩小:0-1之间的小数
放大:大于1的数值

 旋转

函数:rotate()
取值:rotate(ndeg)
n : 具体角度值
n为正, 则顺时针旋转
n为负, 则逆时针旋转

 倾斜

函数:skew()
skewx() --x轴倾斜
skewy() --y轴倾斜

过渡 

过渡属性

作用:指定元素在哪些css属性上的变化会产生过渡的效果(必须的)
属性:transition-property
取值:none | all | property
eg:transition-property:background;
eg:transition-property:background,width,height;

过渡时间

作用:指定过渡效果在多长时间内完成。
注意:可以以 s | ms 为单位.该属性不能省略,一旦省略则没有过渡效果
属性:transition-duration
取值:s|ms
eg:transition-duration:5s;
eg:transition-duration:5s,1s,1s;

过渡时间速度曲线函数

作用:定义整个过渡效果的速率。比如 先快后慢,还是 先慢后快,或者还是匀速
属性:transition-timing-function
取值:预定义值或贝塞尔曲线
ease : 默认值,慢速开始,快速变快,以慢速结束
linear:匀速
ease-in:慢速开始,加速效果
ease-out:慢速结束(快速开始),减速效果
ease-in-out:慢速开始和结束,中间先加后减
eg:transition-timing-function:linear;

过渡延迟

作用:激发过渡操作后,等待多长时间后才开始执行过渡效果
属性:transition-delay
取值:以 s | ms为单位的时间
eg:transition-delay:5s;

简写过渡属性  transition

属性:transition
取值:以空格分开的值列表
property duration timing-function delay;
eg:transition:background 1s linear 0s;
transition:background 1s;
多个过渡效果:
transition : background 1s linear 0s,
color 2s linear 0s,
border-radius 3s linear 1s;

动画

动画的详细参数去看w3c吧!

这里就提下注意的地方:

@keyframes语法:(单独写,在选择器外,style内)@keyframes name{from {css样式;}percent{css样式;}to {css样式;}}animation语法:(写在选择器内)animation:name duration timing-function delay iteration-count direction;

animation-fill-mode

(ie10+)属性规定动画在播放之前或之后,其动画效果是否可见。

none --不改变默认行为。

forwards-- 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards --在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值 (在第一个关键帧中定义)。

both --向前和向后填充模式都被应用。

 说的也差不多了,直接上代码!

<!DOCTYPE html><html> <head> <title>css3 transition animation nick </title> <meta charset="utf-8" /> <style>   body{background-color:#b2b2b2;}   /*2d*/   #d2{     width:500px;     margin:auto;   }   div[id^='img']{width:300px;height:300px;background-color:yellow;}   #nav{margin:10px auto;}   #nav a{     padding:3px 10px;     background:#666;     color:#fff;     font-weight:bold;     border-radius:5px;   }   #showImg{     width:400px;     height:350px;     border:1px solid #333;     text-align:center;     margin-top:20px;     /*相对定位*/     position:relative;   }   #showImg div{     display:none;   }   #showImg div:target{     display:block;   }   #showImg #img1:target{     display:block;     /*绝对定位*/     position:absolute;     top:0px;     -webkit-animation:sliderLeft 3s linear;   }   /*定义动画*/   @-webkit-keyframes sliderLeft{     from{       left:-350px;     }     to{       left:0px;     }   }   #showImg #img2:target{     -webkit-animation:sliderBottom 3s linear;     animation-fill-mode:forwards ;   }   @-webkit-keyframes sliderBottom{     from{       transform:skew(0deg,0deg);     }     to{       transform:skew(45deg,30deg);     }   }   #showImg #img3:target{     -webkit-animation:scaleIn 3s linear 0s;   }   @-webkit-keyframes scaleIn {     from{       transform:scale(0);     }     to{       transform:scale(1);     }   }   #showImg #img4:target{     -webkit-animation:rotateScale 3s linear;   }   @-webkit-keyframes rotateScale{     from{       transform:scale(0) rotate(0deg);     }     to{       transform:scale(1) rotate(360deg);     }   }   /*3d*/   p{text-align:center}  #stage{    width:800px;    height:500px;    border-radius:50%;    margin:0 auto;    border:1px solid blue;    position:relative;    -webkit-perspective:1200px;    /*被嵌套元素的显示模式*/    transform-style:preserve-3d;    transform:perspective(1200px) rotatex(0deg) rotatey(0deg);    background-color: #4cd964;  }  #stage div{    width:100px;    height:100px;    line-height:100px;    border-radius:50%;    background:red;    position:absolute;    left:350px;    top:270px;    text-align:center;    font-size:26px;    color:yellowgreen;  }  #stage div:nth-child(1){    transform:rotatey(0deg) translatez(200px);  }  #stage div:nth-child(2){    transform:rotatey(60deg) translatez(200px);  }  #stage div:nth-child(3){    transform:rotatey(120deg) translatez(200px);  }  #stage div:nth-child(4){    transform:rotatey(180deg) translatez(200px);  }  #stage div:nth-child(5){    transform:rotatey(240deg) translatez(200px);  }  #stage div:nth-child(6){    transform:rotatey(300deg) translatez(200px);  }@keyframes rotate3d {  from{    transform:perspective(1000px) rotatex(0deg) rotatey(0deg) rotatez(0deg);  }  to{    transform:perspective(1000px) rotatex(-180deg) rotatey(-180deg) rotatez(180deg);  }}   #stage:hover{     animation:rotate3d 5s linear infinite;     /*animation-fill-mode:forwards ;*/   } </style> </head> <body> <!--2d--> <div id="d2">   <div id="showImg">     <div id="img1"></div>     <div id="img2"></div>     <div id="img3"></div>     <div id="img4"></div>   </div>   <div id="nav">     <a href="#img1">2D位移动画</a>     <a href="#img2">2D倾斜动画</a>     <a href="#img3">2D缩放动画</a>     <a href="#img4">2D缩放旋转动画</a>   </div> </div> <!--3d--> <p>鼠标悬停预览3d效果</p>  <div id="stage">    <div>WEB</div>    <div>NICK</div>    <div>WEB</div>    <div>NICK</div>    <div>WEB</div>    <div>NICK</div>  </div> </body></html>

View Code

最后展示下效果!