css推拉门

时间：2017-08-05 22:46:33 阅读：406 评论：0 收藏：0 [点我收藏+]

标签：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推拉门

标签：pup rcu aic oval ott ios1 rac gtid bgp

原文地址：http://www.cnblogs.com/yanloveyue/p/7291611.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行