zoukankan      html  css  js  c++  java
  • CSS3动画变形transition

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>CSS3变形transition</title>
        </head>
        <style>
            /*div#translate {
                 300px;
                height: 300px;
                background: #9D9D9D;
            }
            div#translate:hover{
                -webkit-transform:translate(100px,100px) scale(2,2) rotate(45deg) skew(30deg,30deg);
                !*先x,y移动100培训  缩放2倍  旋转45度 skew倾斜 *!
            }*/
            div#transition{
                width:200px;
                height:200px;
                background-color: green;
                /*-webkit-transition:none 1s linear 0s;*/
                /*-webkit-transition:all 1s linear 0s;*/
                /*transition 属性 变换延续时间  速率变化 延迟时间,属性 变换延续时间  速率变化 延迟时间*/
                -webkit-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
                -moz-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
                -ms-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
                -o-transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
                transition:background-color 1s linear 0s,width 0.1s linear 0s,height 1s linear 0s;
            }
            div#transition:hover{
                background-color: #3598DC;
                width:400px;
                height: 400px;
            }
    
    
        </style>
        <body>
            <div id="transition"></div>
            
            <!--<div id="rotat">rotate旋转</div>-->
            <!--<div id="scale">scale缩放</div>-->
            <!--<div id="skew">skew 倾斜</div>-->
            <!--<div id="translate">translate移动</div>-->
            <!--<p>旋转,倾斜 缩放 移动 transform</p>-->
        </body>
    
    </html>

    CSS3变形transition

     

     

     

     

  • 相关阅读:
    运用VS制作安装包
    return的总结
    Swift UIAlertController、UISegmentedControl
    Swift 菊花、UIPageControl和UIProgressView
    Swift UITextField各种属性的设置
    Swift 发送邮件和发短信
    Swift GCD
    swift 定义枚举和结构体 及使用
    iOS怎么来实现关闭自动锁屏
    IOS开发 清空数组正确方法
  • 原文地址:https://www.cnblogs.com/qingqingzou-143/p/6126443.html
Copyright © 2011-2022 走看看