zoukankan      html  css  js  c++  java
  • css3 动画

    css3 动画
    动画:渐变、2D、3D、过渡、动画

      例子:

    /* 从上到下渐变*/
    #div1{
    100px;
    height: 100px;

    background: linear-gradient(red, blue);
    }
    /* 从左到右渐变*/
    #div2{
    100px;
    height: 100px;

    background: linear-gradient(to right,blue, red);
    }
    /* 左上角到右下角渐变*/
    #div3{
    100px;
    height: 100px;

    background: linear-gradient(to bottom right,blue, red);
    }
    /* 多角度渐变*/
    #div4{
    100px;
    height: 100px;

    background: linear-gradient(200deg,blue, red);
    }

    /*translate() 方法 移动*/
    #div5{
    50px;
    height: 100px;
    border:1px solid black;
    background:#0AFF00;
    transition:transform 2s;/* 过渡*/


    }
    #div5:hover{
    transform: translate(100px,100px);

    }

    /*rotate() 方法 旋转*/
    #div6{
    50px;
    height: 100px;
    border:1px solid black;
    background:#0AFF00;

    }
    #div6:hover{

    transform: rotate(30deg);
    }

    /*scale() 方法 缩放*/
    #div7{

    50px;
    height: 100px;
    border:1px solid black;
    background:#0AFF00;
    }
    #div7:hover{

    transform: scale(2,3);
    }

    /*
    rotateX() 方法 绕X轴旋转
    rotateY() 方法 绕Y轴旋转
    */
    #div8{
    10px;
    height: 100px;
    background:#0AFF00;
    }
    #div8:hover{
    transform: rotateX(120deg);
    /* transform: rotateY(120deg);*/
    }

    /*多项改变 */
    #div8{
    10px;
    height: 100px;
    background:#0AFF00;
    transition:width 5s,height 5s, transform 5s;
    /* 要添加多个样式的变换效果,添加的属性由逗号分隔:*/
    }
    #div8:hover{
    150px;
    height: 500px;
    transform: rotateY(120deg);
    }

  • 相关阅读:
    getRandomInt getRandomString
    git 换行符替换
    Versions maven plugin 修改版本
    spotless-maven-plugin java代码自动格式化mvn spotless:apply -fn
    eclipse.ini
    JVM架构和GC垃圾回收机制
    查看搜狗浏览器记住的密码
    TestGc finalize()
    Storm个人学习总结
    mongo嵌套查询
  • 原文地址:https://www.cnblogs.com/wjglm/p/9318297.html
Copyright © 2011-2022 走看看