关于css:过渡和2d效果

34次阅读

共计 1310 个字符,预计需要花费 4 分钟才能阅读完成。

过渡就是给 css 单个或者是多个的属性产生的变动过程增加一个过程,时长的规定看我的项目需要
个别应用简写语法
transition:all 这里的 all 代表选中所有的属性值 5s s 代表秒,也能够用 ms,1 秒等于 1000ms,所以不举荐用 ms
个别写上 transition:all 5s;就能够有一个简略的过渡了,
依据需要写过渡应该在哪里,如果是鼠标指向的话就加在 hover 的上面,如果过渡后须要回来也有过渡动画就须要
加在须要过渡动画的元素里
例:
div{
width: 100px;height: 100px;
border:1px solid red;
transition:all 3s;
}
div:hover{
left:300px;
}
这样就是鼠标指向后有一个过渡,也有一个回来的过渡动画。
div{
width: 100px;height: 100px;
border:1px solid red;
}
div:hover{
left:300px;
transition:all 3s;
}
像这样增加就是一旦鼠标移开该 div,div 会立马回到原点。
过渡动画的减速过程是能够本人定义的,一共是七种。
例:
css 局部:
ul{

    list-style-type: none;
    padding: 0;margin: 0;
    border: 1px solid #f00;
}
ul li{
    width: 200px;
    height: 20px;
    line-height: 30px;
    background-color:#f00;
    margin: 2px 0;
    
}

ul li:nth-child(1):hover{
    width: 500px;
    transition: all 5s linear;
}
ul li:nth-child(2):hover{
    width: 500px;
    transition: all 5s ease;
}
ul li:nth-child(3):hover{
    width: 500px;
    transition: all 5s ease-in;
}
ul li:nth-child(4):hover{
    width: 500px;
    transition: all 5s ease-out;
}
ul li:nth-child(5):hover{
    width: 500px;
    transition: all 5s ease-in-out;
}
ul li:nth-child(6):hover{
    /* 贝塞尔曲线,是利用一些比较复杂的数学公式 */
    width: 500px;
    transition: all 5s cubic-bezier(0.075, 1.650, 0.165, -0.600);
}
ul li:nth-child(7):hover{
    width: 500px;
    transition: all 5s steps(7);
}

html 局部:
<ul>

    <li>linear 匀速 </li>
    <li>ease 加速 </li>
    <li>ease-in 减速 </li>
    <li>ease-out 加速 </li>
    <li>ease-in-out 先减速后加速 </li>
    <li> 贝塞尔曲线 </li>
    <li> 分步骤 </li>
</ul>

每一个我都写好了该语法的减速过程,至于效果图能够拿下本人试试看啦。
对了,补充一点,display 是没有过渡成果的,不要加错了,切记

正文完
 0