css3鼠标放上去一个层中间出现一个阴影并且放大

最新推荐文章于 2021-08-17 17:14:15 发布

花生地瓜

最新推荐文章于 2021-08-17 17:14:15 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013018357/article/details/66970269

本文介绍了如何使用CSS3实现一个交互效果：当鼠标悬停在一个层上时，层的中央会出现阴影并同时放大。通过示例代码展示了具体的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上图
这里写图片描述

  <div class="box">
          <section class="section">
            测试
          </section>
         <aside class="aside">

         </aside>
</div>

css代码：

.box{
    height: 300px;
    width: 300px;
    border: 1px solid #d1d1d1;
    position: relative;
}
.section{
     height: 100%;
     width:100%;
     text-align: center;
     line-height: 300px;
}
.box:hover aside{
   transform: scale(1);
   opacity: .4;
}
.aside{
    position: absolute;
    top: 0px;
    left: 0px;
    transition: all .4s ease-in-out;
    width: 100%;
    height:100%;
    background: #000;
    transform: scale(0);
}