鼠标移入时，好看的阴影效果

录屏转化成gif格式的问题，可能不太流畅，手敲尝试一下把

//两个盒子备用
<div class="" style="width: 1000px;margin:100px auto;background: #0C0C0C;padding: 100px;">

        <div  class="box">
            点击
        </div>
        
        <div  class="circular">
        
        </div>
 </div>

<style>
            
            .box{
                    width:60px;
                    height: 40px;
                    border:2px solid  yellow;
                    text-align: center;
                    line-height: 40px;
                    color: #fff;        
            }
            .box:hover{
                animation:fangda 0.4s linear;
            }
            @keyframes fangda{
                
                0%{
                    box-shadow:0 0 0px 0px rgba(255, 255, 0,0.8);
                }
                100%{
                    box-shadow:0 0 0px 25px rgba(255,255, 0,0); 
                }
            }
            .circular{
                width: 50px;
                height: 50px;
                margin-top:80px;
                border-radius: 50%;
                background-color: #0000FF;
                position: relative;
            }
            .circular:after{
                content:"";
                width: 50px;
                height: 50px;
                border-radius: 50%;
                /* background-color: #0000FF; */
                position: absolute;
                top:0;
                left:0
            }
            .circular:hover:after{
                animation: circle 1.3s  ease-out 75ms;
            }
            
            @keyframes circle{
                0% {
                    opacity: 0.4;
                }
                40% {
                    opacity: 0.7;
                    box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 10px 10px black, 0 0 0 10px rgba(255,255,255,0.8); /*三层阴影 */
                }
                100% {
                    box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 0 10px 10px black, 0 0 0 10px rgba(255,255,255,0.8);
                    transform: scale(2); /*放大两倍*/
                    opacity: 0;
                }
              }
            
</style>

鼠标移入的动画之前发布过一次，今天特地做了gif的图片，主要用到box-shadow

这是看到一个叫daisy，gogogo的博友总结的，记录一下，以备后用