问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css3的问题

头像
taihao
    388282140

    怎么让一张图片，鼠标移动过去之后放大->然后到原本那样，再2秒中进行这个过渡。怎么打这个代码呢？

    htmlhtml5css3cssjavascript
    阅读 4.5k
    10 个回答
    得票最新
    头像
    all2005
      3.4k40352494
      img:hover{transform:scale(1.5);transtion: all 2s ease}
      头像
      qzuser_5803554d42384
        663
        img {
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
img:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
        头像
        陌路凡歌
          7.9k21119

          描述不清楚，你是图片大小不变，只是内部放大吗？如果是的话用负margin解决

          <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .box{
                margin: 50px;
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                overflow: hidden;
            }
            .pox{
                width: 200px;
                height: 200px;
                background-color: red;
                transition: all 0.4s ease; 
                vertical-align: top;
            }
            .box:hover .pox{
                margin: -25px 0 0 -25px;
                width:  250px;
                height: 250px;
            }
            .box2{
                margin-bottom:-1px; 
                border:1px solid #6C92AD; 
                border-bottom:none;
                 background:#EAF0FD;
                 width: 200px;
                 height: 50px;
            }            
        
        </style>
    </head>
    <body>
        <div class="box">
            <img src="2.jpg" alt=""  class="pox"/>
        </div>
    </body>
</html>
          头像
          hold_baby
            3k54882

            如果是要鼠标移动上去 先放大后还原 那就得用动画来写了 0%的时候不放大 50%的时候放大1.5 100%的时候放大0，
            但是如果是鼠标移上放大 离开还原 楼上的就可以

            头像
            xiaopengji
              6411719

              img{transform:scale(1);}
              img:hover{transform:scale(1.5);transtion: all 2s ease}
              这样写就可以实现、

              头像
              t现在是冬天t
                83795469

                直接上代码：

                .img:hover{
           animation: scale 2s  ease-in-out
       }
@keyframes scale{
           50%{
               transform:scale(2)
           }
           to{
               transform:scale(1)
           }
       }

                亲测有效

                头像
                帅气法神
                  29913755

                  img{

                  width:100px;
height:100px;

                  }
                  img:hover{

                  width:200px;
height:200px;
transition:width 2s,height 2s;

                  }

                  头像
                  zwwill_木羽
                    6.3k2931

                    https://jsfiddle.net/cdk244fp/
                    这是否是你想要的效果？

                    div{
  background:url(http://www.w3school.com.cn/i/bg_flower.gif) no-repeat;
  background-position:center;
  width:200px;
  height:250px;
  transition:all 2s;
  background-size:60%;
}
div:hover{
  background-size:120%;
}
                    头像
                    海洋饼干
                      1.5k216

                      这个问题涉及css3两个知识点
                      1.animation 与 keyframes 关键帧
                      2.transform 的 scale 缩放

                      解决方案 2

                      使用transition 和transform 实现动画在鼠标离开后，元素回到原来的状态

                      html

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

                      css

                      .box{

    width: 200px;
    height: 200px;
    background: red;
    transition:all 2s; //设置时间
}
.box:hover{
    transform:scale(1.2); //设置缩放比例
}

                      解决方案 1
                      1.设置关键帧

                      @keyframes box{
    0%{
        transform:scale(1,1);
    }
    50%{
        transform:scale(2,2);  //x,y都放到2倍
    }
    100%{
        transform:scale(1,1);
    }
}

                      2.设置hover样式

                      .box:hover{
    animation: 2s box;  //动画时间2s
}
                      头像
                      Wendy
                        51
                        新手上路，请多包涵

                        img {

                        -webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
transition: all 2s ease-out;

                        }
                        img:hover {

                        -webkit-transform: scale(1.2);
transform: scale(1.2);

                        }

                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        推荐问题