脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：主页> 网页制作> CSS> CSS教程> CSS鼠标悬浮动画

CSS鼠标悬浮动画-hover属性详解

  发布时间：2024-05-24 15:35:41  作者：佚名  我要评论
这篇文章主要介绍了CSS鼠标悬浮动画-hover属性详解，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧

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%;
}

到此这篇关于CSS鼠标悬浮动画-hover属性的文章就介绍到这了,更多相关CSS鼠标悬浮动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • CSS实现鼠标悬浮动画特效

    Css(层叠样式表)是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,
    2023-05-04

  • CSS中的hover属性使用方法

    css 的 hover 属性是一种伪类选择器，它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式，这篇文章主要介绍了CSS中的hover属性使用方法,
    2023-05-29

最新评论