CSS 元素对象阴影和鼠标悬停过渡动画

元素对象阴影模板

box-shadow: -4px 7px 46px 2px rgb(0 0 0 / 10%);
-webkit-box-shadow: -4px 7px 46px 2px rgb(0 0 0 / 10%);
-moz-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);

鼠标悬停过渡动画

input.mainControl {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 100px;
    height: 50px;
    color:#fff;
    font-size: 14px;
    border-radius: 5px;
    background-color: #03a9f4;
    border: none;
    -o-transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -moz-transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
input.mainControl:hover{
    box-shadow: #50beef9c 0px 3px 15px 0px;
    -o-transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -moz-transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

属性说明

box-shadow: #50beefdb 0px 10px 15px 0px;

盒子阴影 : 颜色 X 轴偏移 Y 轴偏移 模糊度 扩展度

transition: .3s cubic-bezier(0.46, 0.03, 0.52, 0.96);

过渡 : 3 秒 贝塞尔曲线 (运动轨迹路径)

调试示例

https://static.hexingxing.cn/v3/css3/box-shadow/