zoukankan html css js c++ java

通过CSS3属性值的变化实现动画效果+触发这些动画产生交互

css3过渡

transition

兼容性：IE10+

transition: none | all | property

默认为none

all 表示所有属性过渡

property 指定属性值，如color opacity

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .box{    
        width:700px;
        height:700px;
        margin:0 auto;    
        background:url(source/pic.png) center no-repeat;
        cursor: pointer;
        -webkit-transform:rotate(0deg);
           -moz-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
             -o-transform:rotate(0deg);
                transform:rotate(0deg);
        -webkit-transition-property:transform;
           -moz-transition-property:transform;
            -ms-transition-property:transform;
             -o-transition-property:transform;
                transition-property:transform;
    }
    .box:hover{    
        -webkit-transform:rotate(180deg);
           -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
             -o-transform:rotate(180deg);
                transform:rotate(180deg);
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition-duration 动画持续时间

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .box{    
        width:700px;
        height:700px;
        margin:0 auto;    
        background:url(source/pic.png) center no-repeat;
        cursor: pointer;
        -webkit-transform:rotate(0deg);
           -moz-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
             -o-transform:rotate(0deg);
                transform:rotate(0deg);
        -webkit-transition-property:transform;
           -moz-transition-property:transform;
            -ms-transition-property:transform;
             -o-transition-property:transform;
                transition-property:transform;
        -webkit-transition-duration:2s;
           -moz-transition-duration:2s;
            -ms-transition-duration:2s;
             -o-transition-duration:2s;
                transition-duration:2s; 
        -webkit-transition-timing-function:linear;/*线性*/
           -moz-transition-timing-function:linear;
            -ms-transition-timing-function:linear;
             -o-transition-timing-function:linear;
                transition-timing-function:linear;   
        -webkit-transition-timing-function:ease;/*平滑*/
           -moz-transition-timing-function:ease;
            -ms-transition-timing-function:ease;
             -o-transition-timing-function:ease;
                transition-timing-function:ease;    
        -webkit-transition-timing-function:ease-in;/*缓入*/
           -moz-transition-timing-function:ease-in;
            -ms-transition-timing-function:ease-in;
             -o-transition-timing-function:ease-in;
                transition-timing-function:ease-in;    
        -webkit-transition-timing-function:ease-out;/*缓出*/
           -moz-transition-timing-function:ease-out;
            -ms-transition-timing-function:ease-out;
             -o-transition-timing-function:ease-out;
                transition-timing-function:ease-out;    
        -webkit-transition-timing-function:ease-in-out;/*缓入缓出*/
           -moz-transition-timing-function:ease-in-out;
            -ms-transition-timing-function:ease-in-out;
             -o-transition-timing-function:ease-in-out;
                transition-timing-function:ease-in-out;        
    }
    .box:hover{    
        -webkit-transform:rotate(180deg);
           -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
             -o-transform:rotate(180deg);
                transform:rotate(180deg);
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition-delay 过渡延迟

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .box{    
        width:700px;
        height:700px;
        margin:0 auto;    
        background:url(source/pic.png) center no-repeat;
        cursor: pointer;
        -webkit-transform:rotate(0deg);
           -moz-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
             -o-transform:rotate(0deg);
                transform:rotate(0deg);
        -webkit-transition-property:transform;
           -moz-transition-property:transform;
            -ms-transition-property:transform;
             -o-transition-property:transform;
                transition-property:transform;
        -webkit-transition-duration:2s;
           -moz-transition-duration:2s;
            -ms-transition-duration:2s;
             -o-transition-duration:2s;
                transition-duration:2s;    
        -webkit-transition-timing-function:ease-in-out;/*缓入缓出*/
           -moz-transition-timing-function:ease-in-out;
            -ms-transition-timing-function:ease-in-out;
             -o-transition-timing-function:ease-in-out;
                transition-timing-function:ease-in-out;   
        -webkit-transition-delay:1s;
           -moz-transition-delay:1s;
            -ms-transition-delay:1s;
             -o-transition-delay:1s;
                transition-delay:1s;           
    }
    .box:hover{    
        -webkit-transform:rotate(180deg);
           -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
             -o-transform:rotate(180deg);
                transform:rotate(180deg);
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transtion简写

transition: property duration timing-function delay

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .box{    
        width:700px;
        height:700px;
        margin:0 auto;    
        background:url(source/pic.png) center no-repeat;
        cursor: pointer;
        -webkit-transform:rotate(0deg);
           -moz-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
             -o-transform:rotate(0deg);
                transform:rotate(0deg);
        -webkit-transition:transform 2s ease-in-out 1s;
           -moz-transition:transform 2s ease-in-out 1s;
            -ms-transition:transform 2s ease-in-out 1s;
             -o-transition:transform 2s ease-in-out 1s;
                transition:transform 2s ease-in-out 1s;        
    }
    .box:hover{    
        -webkit-transform:rotate(180deg);
           -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
             -o-transform:rotate(180deg);
                transform:rotate(180deg);
        -webkit-transition:transform 2s ease-in-out 1s;
           -moz-transition:transform 2s ease-in-out 1s;
            -ms-transition:transform 2s ease-in-out 1s;
             -o-transition:transform 2s ease-in-out 1s;
                transition:transform 2s ease-in-out 1s;  
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

查看全文

相关阅读:
C#学习第四弹之封装、继承和多态
 C#学习第三弹之给常量赋值可能引发的问题
 C#学习第二弹之C#与.NET框架
 hdu 5199 map或二分或哈希
 hdu 5195 线段树
 hdu 2545 并查集
 ACM数论模板
 C#学习第一弹之Hello World
对字符串进行频繁拼接的话，使用StringBuffer或者StringBuilder
String中根据,(逗号)进行分割

原文地址：https://www.cnblogs.com/chenyingying0/p/12256719.html

最新文章
hdu1512
bzoj1367
bzoj2442
bzoj1225
bzoj1224
bzoj1263
bzoj1257
bzoj1037
bzoj2759
bzoj3669