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

查看全文

相关阅读:
JS版Stopwatch计时器
 【学习笔记】——网络营销2（赢利）
CMMI 3级精简并行过程综述
 【学习笔记】——网络营销1（基础概念）
ASP.NET MVC路由匹配检测组件的代码分析
 学习笔记（一）
【学习笔记】——网络营销3（市场策略）
jQuery.API源码深入剖析以及应用实现(4) －选择器篇(下)
关于实现B/S与C/S平台之间功能通用性的设计思路
 【学习笔记】——网络营销6（搜索引擎优化）

原文地址：https://www.cnblogs.com/qingqingzou-143/p/6126443.html