css实现中性凹凸按钮阴影放大动画效果代码-html代码-BFW代码库

css实现中性凹凸按钮阴影放大动画效果代码

代码语言：html

代码描述：css实现中性凹凸按钮阴影放大动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        *{
              margin:0;
              padding:0;
            }
            .container {
              background: #f0f0f0;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100vw;
              height: 100vh;
            }
            .box {
              border-radius: 20px;
              width: 60px;
              height: 60px;
              background: #f0f0f0;
              box-shadow:  0 0 0 #cccccc,
                           0 0 0 #ffffff,
                            10px 10px 10px #cccccc inset,
                            -10px -10px 10px #ffffff inset;
              animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;
              /* animation-fill-mode: forwards; */
            }
        
            @keyframes anime {
              0% {
                width: 60px;
                height: 60px;
                background: #f0f0f0;
                box-shadow:  0 0 0 #cccccc,
                             0 0 0 #ffffff,
                              10px 10px 10px #cccccc inset,
       .........完整代码请登录后点击上方下载按钮下载查看