首页手记学习css3新特性，简单有用的案例2

学习css3新特性，简单有用的案例2

标签：

CSS3

1.transform 变形

rotate(30deg) 顺时针旋转30度【是负数的话就是逆时针旋转】
rotate3d(x,y,z,30deg) 3d旋转
rotateX(30deg) 沿着x轴的进行30度的旋转
rotateY(30deg) 沿着y轴的进行30度的旋转
rotateZ(30deg) 沿着z轴的进行30度的旋转

translate(100px,50px) x轴平移100px,y轴平移50px。【当只有一个值的时候，y轴的值为0. 负数就是反方向移动】
translate3d(100px,50px,20px) 3d转换
translateX(100px) x轴平移100px
translateY(100px) y轴平移100px
translateZ(100px) z轴平移100px

scale(2,1.2) 大于1就是放大，小于1就是缩小。【如果只有一个值，就是缩放同样倍数大小】
scale3d(2,1.2,1.5) 3d缩放
scaleX(1.2) x轴(水平方向)缩放元素
scaleY(1.5) y轴(垂直方向)缩放元素
scaleZ(1.5) z轴缩放元素

skew(30deg,10deg) X轴和Y轴同时按一定的角度值进行扭曲变形【如果只有一个值，就是y轴上不扭曲变形】
skewX(15deg)X轴扭曲变形
skewY(20deg)Y轴扭曲变形

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style type="text/css">
    .p{

    }
.div,.div1,.div2,.div3{   
       width: 200px;
       height: 150px;
     }
     .div{ background: yellow;}
     .div:hover{
       -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
       -ms-transform: rotate(-30deg);
       -o-transform: rotate(-30deg);
       transform: rotate(-30deg);

     }
      .div1{ background: green;}
     .div1:hover{
       -webkit-transform: translate(100px,50px);
       -moz-transform: translate(100px,50px);
       -ms-transform: translate(100px,50px);
       -o-transform: translate(100px,50px);
       transform: translate(100px,50px);
     }
      .div2{ background: red;}
     .div2:hover{
       -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
       -ms-transform: scale(1.5);
       -o-transform: scale(1.5);
       transform: scale(1.5);
     }
      .div3{ background: blue;}
     .div3:hover{
       -webkit-transform: skew(10deg);
       -moz-transform: skew(10deg);
       -ms-transform: skew(10deg);
       -o-transform: skew(10deg);
       transform: skew(10deg);
     }

</style>

<div class="div"></div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

transition 动画属性
ease 逐渐变慢默认值
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 加速在减速

transition([需要改变元素的什么属性] [执行时间] [什么动画来完成] [延迟触发时间(可选)])
执行时间必填，不然没有效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style type="text/css">
.div4{   
       width: 200px;
       height: 150px;
     }
     .div4{ background:#ff0;
        -webkit-transition: background-color 1s linear;
        -moz-transition: background-color 1s linear;
        -o-transition: background-color 1s linear;
        transition: background-color 1s linear;
           }
     .div4:hover{
            background-color: #0ff; 
                     }

</style>
<div class="div4"></div>
</body>
</html>

transition改变多个属性值只需在后面加个逗号

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style type="text/css">
.div4{   
       width: 200px;
       height: 150px;
     }
     .div4{ background:#ff0;
        -webkit-transition: background-color 1s linear ,width 1s ease-in-out .5s;
        -moz-transition: background-color 1s linear ,width 1s ease-in-out .5s;
        -o-transition: background-color 1s linear ,width 1s ease-in-out .5s;
        transition: background-color 1s linear ,width 1s ease-in-out .5s;
        /*宽度变化的时候加了延迟时间*/
           }
     .div4:hover{
            background-color: #0ff; 
            width:150px;
                     }

</style>
<div class="div4"></div>
</body>
</html>

animations 动画

animations动画需要@keyframes关键帧
语法 animation:绑定到选择器的 keyframe 名称（必填） | 动画所花的时间（必填）|动画形式 | 延迟时间 | 播放次数 | 是否轮流反向播放动画
animation: name duration timing-function delay iteration-count
direction;

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <style>
    .div{width: 100px;height: 100px;background: #ff0;
      position: relative;  /*进行移动要加定位，html元素的位置都是静态的*/
      -webkit-animation: mymove 5s ease-in;
     -o-animation: mymove 5s ease-in;
      animation: mymove 5s ease-in;
    }
    @keyframes mymove{
        0%{top:0px;}
        25%{top:200px;}
        50%{top:20px;}
        100%{top:100px;}
    }
   @-webkit-keyframes mymove{
        0%{top:0px;}
        25%{top:200px;}
        50%{top:20px;}
        100%{top:100px;}
    }
  </style>

  <div class="div"></div>
</body>
</html>

点击查看更多内容