2D过渡模块的其他属性

时间：2018-06-16 14:56:10 阅读：183 评论：0 收藏：0 [点我收藏+]

官网上关于过渡属性的值：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

transition-timing-function 的值有一下特点：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/*布局基本样式 */
ul{
width: 1000px;
height: 600px;
background-color: beige;
margin: 100px auto;
list-style: none;
}
ul li{
width: 150px;
height: 100px;
background-color: pink;
margin-top: 10px;
line-height: 100px;
text-align: center;

            /* 添加需要过渡的属性 */
            transition-property: margin-left;  
            /* 添加时间 */
            transition-duration: 5s;
        }
        /* 鼠标移入 ul 添加统一效果 */
        ul:hover li{
            margin-left: 800px;
        }

        /* 添加各自的样式效果 */
 
        ul li:nth-child(1){
            transition-timing-function: linear;
        }
        ul li:nth-child(2){
            transition-timing-function:ease; 
        }
        ul li:nth-child(3){
            transition-timing-function: ease-in;
        }
        ul li:nth-child(4){
            transition-timing-function: ease-out;
        }
        ul li:nth-child(5){
            transition-timing-function: ease-in-out;
        }
 
    </style>
</head>
<body>
    <ul>
        <li>liner</li>
        <li>ease</li>
        <li>ease-in</li>
        <li>ease-out</li>
        <li>ease-in-out</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*布局基本样式 */
        ul{
            width: 1000px;
            height: 600px;
            background-color: beige;
            margin: 100px auto;
            list-style: none;
        }
        ul li{
            width: 150px;
            height: 100px;
            background-color: pink;
            margin-top: 10px;
            line-height: 100px;
            text-align: center;

            /* 添加需要过渡的属性 */
            transition-property: margin-left;  
            /* 添加时间 */
            transition-duration: 5s;
        }
        /* 鼠标移入 ul 添加统一效果 */
        ul:hover li{
            margin-left: 800px;
        }

        /* 添加各自的样式效果 */
 
        ul li:nth-child(1){
            transition-timing-function: linear;
        }
        ul li:nth-child(2){
            transition-timing-function:ease; 
        }
        ul li:nth-child(3){
            transition-timing-function: ease-in;
        }
        ul li:nth-child(4){
            transition-timing-function: ease-out;
        }
        ul li:nth-child(5){
            transition-timing-function: ease-in-out;
        }
 
    </style>
</head>
<body>
    <ul>
        <li>liner</li>
        <li>ease</li>
        <li>ease-in</li>
        <li>ease-out</li>
        <li>ease-in-out</li>
    </ul>
</body>
</html>

2D过渡模块的其他属性

原文：https://www.cnblogs.com/-Tony/p/9190434.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)