css 切换钉板效果
[英]css toggle nailboard effect
问题描述
The interface shown below toggles if the toggle button is clicked.
如果单击切换按钮，则如下所示的界面会切换。 For now I used only opacity to toggle the visibility but it doesn´t look even close what I am trying to achieve.现在我只使用不透明度来切换可见性，但它看起来甚至不接近我想要实现的目标。 I am trying to visualize the whole div in a way, that it look like it is pushed from the background to the front.我试图以某种方式可视化整个 div，它看起来像是从背景推到前面。 You may know those child toys (nailboards).您可能知道那些儿童玩具（钉板）。
Update - modified the code:更新 - 修改代码：
I added @keyframes for the opacity, visibility and box-shadow which I reversed.我为我反转的不透明度、可见性和框阴影添加了@keyframes。 The result is ok but the could be improved.结果还可以，但可以改进。 Overall I am fine with it but for sure an CSS would improve that easily.总的来说，我对它很好，但可以肯定的是，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>
1 个解决方案
解决方案1
0 2022-04-22 06:34:19
I think you are searching for animating visibility so it appears like a pin?我想你正在寻找动画可见性，所以它看起来像一个大头针？
Although Animation in visibility is not really a thing Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (it steps instead of moves slowly) so you should ease in and ease out the effects that appear to give the DIV depth.尽管 Animation 的可见性并不是真正的东西为什么可见性 animation 不起作用：Stackoverflow: Pure CSS animation 可见性延迟（它逐步而不是缓慢移动）所以你应该缓和和缓和似乎赋予 DIV 深度的效果.
I can't be sure if you want the div to always be visible or just make it visible and then animate into the nailbord type.我不确定您是希望 div 始终可见，还是只是使其可见，然后将其动画化为钉板类型。
In that case: visibility: hidden;在那种情况下：可见性：隐藏； -> visibility: visible; ->可见性：可见； followed by: shadows / effects just after that with the same type (place a div under it or something) followed by: shadows / effects just after that with the same type (place a div under it or something)
If it's not clear I'll try to make an example this weekend.如果不清楚，我将在本周末尝试举个例子。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.