元素对象阴影模板

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/


何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注