美文网首页
css hover 鼠标移入放大鼠标离开缩小

css hover 鼠标移入放大鼠标离开缩小

作者: 臭臭的胡子先生 | 来源:发表于2023-10-25 13:43 被阅读0次
.btn_d{
 cursor: pointer; 
}

//hover 时放大
.btn_d:hover{
  animation: move 0.3s ease-in-out   forwards;
 }
  /* 鼠标离开时执行的CSS代码 */
.btn_d:not(:hover) {

  animation: move1 0.3s ease-in-out   forwards;
}

@keyframes move {
    0% {
      transform: scale(1) ;
    }
    100% {
      transform: scale(1.02) ;
    }
  }
  @keyframes move1 {
    0% {
      transform: scale(1.02) ;
    }
    100% {
      transform: scale(1) ;
    }
  }

相关文章

  • CSS标签分类,盒子模型,层模型

    CSS属性引申 hover伪类当鼠标移入执行选中的代码,将鼠标移出忽略此代码。选择器:hover{ }**伪类也有...

  • dagre-d3 项目实践

    功能包含: 鼠标滚动放大缩小 node节点click、hover、color设置 edge连线hover 动态添加...

  • Axure教程:图片放大缩小制作步骤详解

    1、如何实现图片放大缩小效果:(1)鼠标移入图片时,图片尺寸放大,并将图片置顶;(2)鼠标移除图片时,图片恢复成原...

  • 关于vue项目问题

    1.鼠标事件 鼠标的变手:cursor:pointer鼠标的移入:XXX:hover 伪类 2.required文...

  • 17-jQuery方法之hover和简单动画

    hover() 鼠标移入/移出 show()/hide() 显示/隐藏 fadeIn() / fadeOut(...

  • computer

    刚才才发现除了按住ctrl键滑动鼠标可以放大缩小外 按住鼠标右键再滑动鼠标也可以放大缩小(笑哭)

  • PS简单操作

    标尺 command + r放大镜: Z 鼠标是放大镜的情况下 鼠标左键放大, alt + 鼠标左键 缩小。修...

  • 基本操作

    透视: 鼠标左键:放大缩小 鼠标左键+wsad:前后左右(可以同时通过鼠标中键调节速度) 鼠标左键+qe:上下 放...

  • <CINEMA 4D 不完全笔记>

    基础操作&建模 转动视角:Alt-鼠标左键 | 移动视角:Alt-鼠标中键 | 放大缩小:鼠标滚轮 移动:E | ...

  • Hover.css 动画库源码样式解读

    hover.css[http://ianlunn.github.io/Hover/]是一个CSS3的鼠标悬停效果,...

网友评论

      本文标题:css hover 鼠标移入放大鼠标离开缩小

      本文链接:https://www.haomeiwen.com/subject/tkpeidtx.html