鼠标经过一个矩形（包含阴影，圆角），逐渐变透明

最新推荐文章于 2024-09-23 02:01:58 发布

原创最新推荐文章于 2024-09-23 02:01:58 发布 · 809 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

博客主要围绕鼠标经过一个带有阴影和圆角的矩形时，使其逐渐变透明的效果展开，涉及前端页面元素交互效果的实现，属于前端开发领域。

<style>
.juxing {
          width: 200px;
          height: 200px;
          margin: 0 auto;
          background-color: blue;
          border-radius: 4px;
          box-shadow: 8px 8px 5px black;
          transition: all 0.7s;/* 动画时间 */
        }
        .juxing:hover{/* 鼠标经过触发 */
          opacity: 0;
        }
</style>
<body>
    <div class="juxing"></div>
</body>