CSS过渡效果

Posted 2020-06-27

@charset"gb2312";
body{
     margin:200px
}
div{
    width:200px;
    height:200px;
    border:2px solid red;
    background:yellow;
    transition-duration:1s;       
    transition-property:background-color,color,margin;   /* 限制过渡的元素 property性质*/
    transition-delay:0s,2s,0s;    /*对应transition-property设置延迟效果 delay延迟*/

    transition-property:all;
    transition-timing-function:ease-out;  [timing调速  function函数]
/*ease慢速开始变快后慢逐渐变慢  liner匀速 ease-out减速  ease-in加速  ease-in-out先加速再减速*/                         
    transition-timing-function: cubic-bezier(0,0,1,1）;
/*自定义0~1之间*/    
    transition-timing-function:steps(2,start);
    
/*start鼠标放置上去就立马开始过渡，end先时间用后再过渡*/


/*简写*/    
transition:backgroud-color 3s ease 0s,color 6s ease 1s,margin 1s ease 0s;
transition:all 1s ease 0s;     


    
}
/*  
a:link{color:}      未访问 
a:visited{color:}   已访问 
a:hover{color: }     鼠标悬停在链接上时 
a:active{color:}   点中的链接 
*/

div:hover{
    background-color:orange;
    color:blue;
    margin:100px;     

};