css3动画

转换:transform

  1.transform: translate(50px,100px);,偏移位置,将元素偏移到x轴50px,y轴100px的位置,元素在页面位置不动

  2.transform: rotate(30deg);旋转,将元素旋转30度,如果是负数就逆时针旋转,元素在页面位置不动

  3.transform: scale(2,3);缩放,将元素宽放大2倍,高放大3倍,元素在页面位置不动

  4.transform: skew(30deg,20deg);在平面上倾斜,x轴上倾斜30度,y轴上倾斜20度,元素在页面位置不动

  5.transform:matrix(0.866,0.5,-0.5,0.866,0,0);将上面四个方法缩写成一个,旋转、缩放、移动(平移)、倾斜功能

  6.transform: rotateX(120deg);围绕其在一个给定度数X轴旋转的元素

  7.transform: rotateY(130deg);围绕其在一个给定度数Y轴旋转的元素

过度:transition

  过度就是在元素动作时给他时间引导一下

div
{
    transition: width 2s;
}
div:hover
{
    width:300px;
}

鼠标移到div时宽会在两秒内变为300px;

div
{
    transition: width 2s, height 2s, transform 2s;
}

也可以加上转换效果,实现宽2秒高两秒转换两秒内转变

动画:animation

选择一个样式,里面是动画的内容,从背景红色,过渡到背景黄色

myfirst
{
    from {background: red;}
    to {background: yellow;}
}

当鼠标移动到div时,动画在五秒钟对div进行改变

div:hover
{
    animation: myfirst 5s;
}

使用动画,为了达到浏览器最佳效果,一般都将from和to设置为0%和100%

myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

 

上一篇:微信公众号图文 点击显示图片效果


下一篇:不同的Python实现方式的区别