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

最新推荐文章于 2024-05-09 17:25:39 发布

longyinfengwu

最新推荐文章于 2024-05-09 17:25:39 发布

阅读量1.5w

点赞数 12

分类专栏： HTML

本文链接：https://blog.csdn.net/tenggeer0789/article/details/89478859

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

我们在浏览各大网站时，点击其中的图片可能会出现放大或者旋转等等的特效。这种效果的确能让人眼前一亮，也就可能带来用户点击的流量。当然强大的css功能不仅仅只有这样特效。本篇文章就给大家介绍一种更加酷炫的特效即当鼠标移入div块时产生的css阴影效果，这样就能立即产生立体感。
css阴影效果具体代码示例如下：

<style>
        .shadow{
            float:left;
            margin-left:20px;
            background: #EEFF99;
             transition-duration: 0.5s; //停留时间显示
            width:200px;
            height:400px;
        }
        .shadow:hover{
            -webkit-box-shadow: #ccc 0px 10px 10px;
            -moz-box-shadow: #ccc 0px 10px 10px;
            box-shadow: #ccc 0px 10px 10px;  }
    </style>
</head>
<body>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</body>

注：无论是给那个元素加阴影都离不开一个重要的属性 :hover 伪类。

:hover 伪类就是在鼠标移到元素上时向此元素添加特殊的样式。只要你掌握了这个hover的使用方法，无论是给div块还是图片加阴影都可以轻松实现这样的效果。

这个伪类是应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。

longyinfengwu

关注

12
点赞
踩
30

收藏

觉得还不错? 一键收藏
4
评论
css怎么实现鼠标移动到div块时自动加阴影效果？

我们在浏览各大网站时，点击其中的图片可能会出现放大或者旋转等等的特效。这种效果的确能让人眼前一亮，也就可能带来用户点击的流量。当然强大的css功能不仅仅只有这样特效。本篇文章就给大家介绍一种更加酷炫的特效即当鼠标移入div块时产生的css阴影效果，这样就能立即产生立体感。css阴影效果具体代码示例如下：<style> .shadow{ flo...
复制链接

扫一扫