如何用动画实现开关门效果（未完成）

喵初

于 2022-11-07 17:52:11 发布

阅读量145

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_56070297/article/details/127735861

版权

仅实现开门动画，关门动画未实现。

<!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>Document</title>
    <style>
        section{
            width: 600px;
            height: 600px;
            background-color: pink;
            display: flex;
            position: relative;
            top: 200px;
            left: 40vw;
            perspective: 1200px;
            perspective-origin: center;
            transform-style: preserve-3d;
        }
        section .box1{
            width: 300px;
            height: 600px;
            border: 1px solid black;
            background-color: pink;
            animation: run1-1 3s linear 0s forwards;
            transform-origin: 0 0;
            
        }
        .box1:before{
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            border: 1px solid black;
            border-radius: 50%;
            margin: 290px 0;
            margin-left: 270px;
        }
        section .box2{
            width: 300px;
            height: 600px;
            border: 1px solid black;
            background-color: pink;
            transform-origin: 100% 100%;
            
        }
        .box2:before{
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            border: 1px solid black;
            border-radius: 50%;
            margin: 290px 0;
            margin-left: 10px;
        }
        img{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -10;
            
        }

        section:hover .box1{           
            animation: run1 3s linear 0s forwards; 
        }
        section:hover .box2{
            animation: run2 3s linear 0s forwards; 
        }
        section:hover img{
            animation: run3 3s linear 3s forwards; 
        }
        @keyframes run1 {
            0%{
                transform-origin: 0 0;
                transform: rotateY(0);
            }
            100%{
                transform-origin: 0 0;
                transform: rotateY(-90deg);
            }
        }
        

        @keyframes run2 {
            0%{
                transform-origin: 100% 100%;
                transform: rotateY(0);
            }
            100%{
                transform-origin: 100% 100%;
                transform: rotateY(90deg);
            }
        }
        @keyframes run3 {
            0%{
                transform: translateZ(0px);
            }
            100%{
                transform: translateZ(500px);
            }
        }
    </style>
</head>
<body>
    <section>
        <div class="box1"></div>
        <div class="box2"></div>
        <img src="./image/R-C.gif" alt="">
    </section>
</body>
</html>