css3(二) 过渡和分页 - 飄落的葉子

1、定义

过渡是元素从一种样式逐渐改变为另一种的效果

（1）指定要添加效果的CSS属性

（2）指定效果的持续时间默认值是0。没有任何效果

div{
    transition:width 2s;
    -webkit-transition:width 2s;/*Safari
*/}
如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户
鼠标放在一个元素上时：
div:hover{width:300px;}
要添加多个样式的变换效果，添加的属性由逗号分隔：
div{
    transition:width 2s,height 2s,transform 2s;
    -webkit-transition:width 2s,height 2s,
    -webkit-transform 2s;
}

2、过渡属性

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

div{ 
    transition-property:width;   属性  all
    transition-duration:1s;  完成过渡的时间 
    transition-timing-function:linear;   /* 过渡动画的运动方式  贝塞尔曲线cubic-bezier(0,1.95,.83,.67)*/

    transition-delay:2s;/* 过渡延迟时间 */

<strong>}
</strong>

　3.CSS3分页　

定义：如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        ul{
            width: 808px;
            margin: 100px auto;
        }
        li{
            width: 60px;
            height: 60px;
            background: #cccccc;
            float: left;
            text-align: center;
            line-height: 60px;
            margin: 2px;
            border-radius: 6px;
            font-size:24px;
        }
        li:first-child{
            width: 80px;
             background: linear-gradient(to right,green,red);
             font-size: 14px;
        }
        li:last-child{
            width: 80px;
             background: linear-gradient(to right,green,red);
             font-size: 14px;
        }
        li:nth-of-type(3){
            background: linear-gradient(to right,hotpink,blue);
        }
        li:hover{
            background: green;
        }
    </style>
</head>
<body>
     <ul>
         <li>&lt;<上一页</li>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
         <li>下一页&gt;></li>
     </ul>
</body>

posted on 2020-08-21 08:30 飄落的葉子阅读(162) 评论(0) 收藏举报

刷新页面返回顶部