CSS transform属性的简单应用——双开门动画效果

1.效果演示

CSS transform属性有许多效果，平移、旋转、缩放等。

这里简单应用平移效果，实现双开门动画，以下为效果图。

2.设计思路

设置一张居中的需要隐藏的底图。
设置封面图，平分成左右两部分。
鼠标悬浮在封面图上，触发“开门”效果。

3.代码详解

3.1 设置居中底图

 <!--写一个div标签，以容纳背景图-->
<body>
    <div class="box"> </div>
</body>

/*清除以下默认属性，不清楚也没关系*/
* { 
    margin: 0;
    padding: 0;
}
.box {
    margin: 50px auto; /*设置标签居中*/
    height: 600px;        
    width: 1000px;
    background-size: 1000px; /*背景图宽度缩放与标签宽度一样，以铺满标签*/   
    background-image: url(images/pik_lightning.jpg);  /*设置隐藏的底图*/
    overflow: hidden;   /*当封面图溢出标签时隐藏*/
}

3.2 设置左右“门”

使用伪元素 before, after 创建两扇“门”
.box::before,
.box::after {
    content: ''; 
    float: left; /*让两扇“门”脱标，左浮动成一排*/
    width: 50%;  /*每扇“门”占父容器的50%*/
    height: 600px;
    background-size: 1000px; /*“门”的高度与底图高度一致*/
    background-image: url(images/pik_poster.jpg);
    transition: all 1s;   /*设置“门”的平移动画*/
}

.box::after {
    background-position: right 0; /*使右扇门定位到父容器的右边*/
}

3.3. 设置鼠标触发

/*利用伪类:hover 鼠标悬停时，触发两扇“门”的平移*/
.box:hover::before {
    transform: translateX(-100%); /*左扇门向左移*/
}

.box:hover::after {
    transform: translateX(100%); /*右扇门向右移*/
}

4.源码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双开门效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            margin: 50px auto;
            height: 600px;
            width: 1000px;
            background-size: 1000px;
            background-image: url(images/pik_lightning.jpg);
            overflow: hidden;
        }

        .box::before,
        .box::after {
            content: '';
            float: left;
            width: 50%;
            height: 600px;
            background-size: 1000px;
            background-image: url(images/pik_poster.jpg);
            transition: all 1s;
        }

        .box::after {
            background-position: right 0;
        }

        .box:hover::before {
            transform: translateX(-100%);
        }

        .box:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

CSS transform属性的简单应用——双开门动画效果

1.效果演示

2.设计思路

3.代码详解

3.1 设置居中底图

3.2 设置左右“门”

3.3. 设置鼠标触发

4.源码展示

猜你喜欢