常见CSS鼠标悬浮动画-hover属性

最新推荐文章于 2024-09-14 08:13:21 发布

凡小多

最新推荐文章于 2024-09-14 08:13:21 发布

阅读量3.3k

点赞数

分类专栏： HTML+CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/wgh4318/article/details/126933661

版权

HTML+CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

文章目录

1. Grow-Shadow

鼠标移入盒子放大并出现底部阴影

效果：
在这里插入图片描述
代码

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: aqua;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.box:hover,
.box:focus,
.box:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

2. Move-Shadow

鼠标移入盒子,盒子向上移动并出现底部阴影

效果：
在这里插入图片描述

代码

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: aqua;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  &::before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(
      center,
      ellipse,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 80%
    );
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 80%
    );
    /* W3C */
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
  }
}
.box:hover,
.box:focus,
.box:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  &::before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}

3. Curl-Bottom-Right

鼠标移入盒子,盒子右下角卷起

效果：
在这里插入图片描述

代码

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: aqua;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  &::before {
    pointer-events: none;
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    bottom: 0;
    right: 0;
    background: white;
    /* IE9 */
    background: linear-gradient(
      315deg,
      white 45%,
      #aaa 50%,
      #ccc 56%,
      white 80%
    );
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
  }
}
.box:hover:before,
.box:focus:before,
.box:active:before {
  width: 25%;
  height: 25%;
}