Question

我想为我的css添加转换以实现顺畅的响应操作，但似乎无法使其工作。任何人都可以开导我吗？我需要覆盖一些东西吗？

    body{
    padding-top: 60px;
     transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

Answer 1

从这里开始阅读：http://www.w3schools.com/css/css3_transitions.asp

CSS3过渡是一种让元素逐渐从一种风格转变为另一种风格的效果。

所以你已经定义了样式的变化。

当指定的CSS属性更改值时，效果将开始。典型的CSS属性＆gt;更改将是用户将鼠标悬停在元素上时：

通常a：悬停用于触发更改。例如Triggering CSS3 Transform on browser resize向您展示，也可以使用媒体查询触发样式更改。

首先定义效果，持续时间等：

body{
     padding-top: 0px;//begin state, you don't have to declare this cause 0px is default

     transition:padding-top 2s linear; 
    -o-transition:padding-top 2s linear; 
    -moz-transition:padding-top 2s linear; 
    -webkit-transition:padding-top 2s linear;
}

注意用padding-top替换all。使用all将检查所有可能样式的更改，请参阅：http://msdn.microsoft.com/en-us/library/ie/dn254934(v=vs.85).aspx以获取它们的列表，这会占用不必要的计算时间。

第二个定义你的风格变化：

@media screen and (max-width: 767px){
    body{
          padding-top: 200px;
    }
}

请参阅：http://bootply.com/105331

CSS Transitions Twitter的Bootstrap 3

1 个答案: