css切换钉板效果

Question

如果单击切换按钮，下面显示的界面将进行切换。目前，我只使用不透明来切换可见性，但它看上去甚至不接近我试图实现的目标。我试图想象整个div在某种程度上，它看起来像是从背景推到前面。你可能知道那些儿童玩具(钉板)。

​

​

更新-修改代码：

我添加了@关键帧的不透明度，可见性和框-阴影，我倒了。结果是可以的，但还可以改进。总的来说，我对它没有意见，但可以肯定的是，CSS会很容易地改进这一点。

​

  $("#toggle").click(function() {
            $(".wrapper").toggleClass("animate")
            $(".properties").toggleClass("animate")
            $(".button").toggleClass("animate-button")
        })

 body {
        font-size: 14px;
        font-family: 'Lato', sans-serif;
        text-align: left;
        color: #757575;
        cursor: default;
        overflow: hidden;
        background: #ECF0F3;
    }

    .wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 350px;
        padding: 40px 35px 35px 35px;
        margin: 30px;
        border-radius: 20px;
        background: #ecf0f3;
        visibility: hidden;
    }

    .animate {
        animation-name: fadeInDiv;
        animation-duration: 1s;
        animation-direction: normal;
        animation-fill-mode: forwards;
    }

    .animate-button {
        animation-name: fadeInButton;
        animation-duration: 1s;
        animation-direction: normal;
        animation-fill-mode: forwards;
    }

    @keyframes fadeInDiv {
        0% {
            opacity: 0.8;
            visibility: visible;
            box-shadow:  inset 0px 0px 0px #cbced1,
            inset -0px -0px 0px #ffffff;
        }
        100% {
            opacity: 1;
            visibility: visible;
            box-shadow: inset 10px 10px 10px #cbced1,
            inset -10px -10px 10px #ffffff;
           
        }
    }

    @keyframes fadeInButton {
        0% {
            box-shadow: 0px 0px 0px #b1b1b1,
                    -0px -0px 0px #ffffff;
        }
        100% {
            box-shadow: 3px 3px 8px #b1b1b1,
                    -3px -3px 8px #ffffff;
        }

    }

    #title {
        text-align: center;
        font-size: 24px;
        padding-top: 10px;
        letter-spacing: 0.5px;
    }

    .visible {
        visibility: visible;
    }

    #sub-title {
        text-align: center;
        font-size: 15px;
        padding-top: 7px;
        letter-spacing: 3px;
    }

    .field-icon {
      font-family: FontAwesome;
      font-size: 16px;
      padding-left: 10px;
      padding-right: 10px;
      width: 40px;
      color: #F59B69;
}
    
    .fields {
        width: 100%;
        padding: 45px 5px 5px 5px;
    }

    .fields input {
        border: none;
        outline: none;
        background: none;
        font-size: 16px;
        color: #555;
        padding:20px 10px 20px 5px;
        width: fit-content;
    }

    .properties {
        padding-left: 10px;
        margin-bottom: 20px;
        border-radius: 25px;
    }

    #confirm-button {
        position: relative;
        bottom: 0;
        left: 0;
        outline: none;
        border:none;
        cursor: pointer;
        width:100%;
        height: 50px;
        border-radius: 30px;
        font-size: 20px;
        color:#fff;
        text-align: center;
        background: #F59B69;
        margin-top: 30px;
    }

    #cancel-button {
        position: absolute;
        top: 0;
        right: 0;
        margin: 20px;
        outline: none;
        border:none;
        cursor: pointer;
        width: 50px;
        height: 30px;
        border-radius: 30px;
        font-size: 14px;
        color:#fff;
        text-align: center;
        background: #F59B69;
    }

    #confirm-button:hover, #cancel-button:hover {
        background:#fff;
        color: #F59B69;
    }

    #confirm-button:active, #cancel-button:active {
        box-shadow: inset 3px 3px 8px #b1b1b1,
                    inset -3px -3px 8px #ffffff;
    }

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

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>CSS Playground</title>
    
    <!-- FontAwesome -->
    <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script> 
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
</head>

<body>
    <button id="toggle">toggle</button>

    <div class="wrapper">
        <div id="title">Title</div>
        <div id="sub-title">Sub-Title</div>
        <div class="fields">
            <div class="properties"><span class="field-icon"><i class="fa-solid fa-pen-to-square"></i></i></span><input placeholder="name"></div>        
            <div class="properties"><span class="field-icon"><i class="fa-solid fa-palette"></i></span><input placeholder="color"></div>
            <button class="button" id="confirm-button"><i class="fas fa-check-circle"></i></button>
        </div>
        <button class="button" id="cancel-button"><i class="fas fa-times-circle"></i></button>
    </div>
        

</body>
</html>

​

Answer 1

我认为你是在寻找动画的可见度，所以它看起来像一个别针？

虽然可见性动画并不是一个真正的东西，Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (它的步伐，而不是缓慢的移动)，所以你应该放松和减轻的影响，似乎给了DIV的深度。

我不确定您是否希望div总是可见的，或者只是使它可见，然后动画成钉螺类型。

在这种情况下:可见性:隐藏；->可见性:可见；后面是:具有相同类型的阴影/效果(在其下面放置div或其他东西)。

如果不清楚的话，我这个周末就试着做个例子。