加载中...

实现鼠标移动到div块时自动加阴影效果

发表于2021-03-11|前端

|字数总计:96|阅读时长:1分钟|阅读量:|评论数:

HTML代码

1
2
3

<div class="shadow">
    //已省略无关代码
</div>

CSS代码

.shadow {
    float: left;
    margin-left: 20px;
    transition-duration: 0.5s; /*停留时间显示*/
}
 
.shadow:hover {
    -webkit-box-shadow: #337ab7 0px 10px 10px;
    -moz-box-shadow: #337ab7 0px 10px 10px;
    box-shadow: #337ab7 0px 5px 5px;
}

效果

PS.

来源：css怎么实现鼠标移动到div块时自动加阴影效果？_tenggeer0789的博客-CSDN博客

文章作者: LeDao

文章链接: https://blog.zoutl.cn/95.html

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LeDao's Blog！

相关推荐

实现鼠标移入文字向右移动效果

给网页添加背景图片（网页缩小放大都不受影响）

鼠标移入div显示查看更多

一套绝佳的图标字体库和CSS框架：Font Awesome图标

HTML去掉a标签的下划线

CSS中margin和padding的区别

评论