css推拉門

最後更新：2017-08-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：pup rcu aic oval ott ios1 rac gtid bgp

3.jpg

bg.png

主要知識點：

相對定位、絕對位置：子項目採用絕對位置，父元素要採用相對定位，簡稱“子絕父相”。

過渡效果：

transition: 要過渡的屬性（一般設定為all）花費時間運動曲線何時開始

一般transition只設定前兩個屬性

其中運動曲線有：

linear：線性過渡。等同於貝茲路徑(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡。等同於貝茲路徑(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同於貝茲路徑(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同於貝茲路徑(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同於貝茲路徑(0.42, 0, 0.58, 1.0)
移動：
transform:translate(x,y);(translateX(),translateY())
單個值x起作用
transform:translate3d(x,y,z);
(z越大，看到的越大，想象一下面向螢幕向裡z值越來越小，其中z的值只能是px）
縮放：
transform:scale();//單個值，x,y都起作用
transform:scaleX();
transform:scaleY();
旋轉：
transform:rotate();//單位是deg

補充：
旋轉中心點：
transform-origin: ;//可以是top left right bottom 也可以是px
傾斜：
transform:snew(x,y);//單位deg
x為正值是向左傾斜，y為正值時向上傾斜
透視：
perspective: px;//3d效果，視距越大，效果越不明顯一般設為1000px

以下為詳細代碼:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>推拉門</title>
   <style>
       section{
           width: 450px;
           height: 300px;
           margin:100px auto;
           background: url(3.jpg) no-repeat;
           position: relative;
           perspective:1000px;
       }
       .left,.right{
           position: absolute;
           top: 0;
           width: 50%;
           height: 100%;
           background-color: pink;
           transition: all 2s;
       }
       .left {
           left: 0;
           border-right: 1px solid #CCC;
           transform-origin: left;
           background:url(bg.png) repeat;
           }
       .right{
               right: 0;
               border-left: 1px solid #CCC;
               transform-origin: right;
                background:url(bg.png) repeat;
       }
       .left:before{
            content: "";
            height: 20px;
            width: 20px;
            border-radius: 50%;
            position: absolute;
            right:5px;
            top:50%;
            transform: translate(0,-50%);
            border: 1px solid #333;
       }
       .right:before{
            content: "";
            height: 20px;
            width: 20px;
            border-radius: 50%;
            position: absolute;
            left:5px;
            top:50%;

      /*向上移動自身的50%*/
            transform: translate(0,-50%);
            border: 1px solid #333;
       }
       /*.left:hover{
             transform: rotateY(-200deg);
       }
       .right:hover{
           transform: rotateY(200deg);
       }*/
       section:hover .left{
           transform: rotateY(-200deg);
       }
        section:hover .right{
           transform: rotateY(200deg);
        }
       </style>
</head>
<body>
   <section>
       <div class="left"></div>
       <div class="right"></div>
   </section>
</body>
</html>

css推拉門

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More