zoukankan      html  css  js  c++  java
  • CCS3 动画-鼠标放上去放大背景图片

    ---〉

    效果如上,一个简单的过渡放大效果,

    <!DOCTYPE HTML>
    <html>
    <body>
        <style>
            #test{
                width:300px;
                height:300px;
                background:#ccc;
               border:5px solid #ccc;
                overflow:hidden;
            }
          #con{
              width:300px;
              height:300px;
            background:url("2.jpg") -20px -20px;
            transition:all ease-in-out 0.5s;
    
          }
          #con:hover{
              transform:scale(1.1);
          }
        </style>
        <div id="test">
            <div id="con"></div>
        </div>
    </body>
    </html>

    这里transition:all ease-in-out 0.5s;设定变形参数, transform:scale(1.1);是原图放大1.1倍

  • 相关阅读:
    lldb
    错误记录
    越狱后
    c#学习
    26python类
    day01
    第二冲刺阶段第四天
    第二冲刺阶段第三天
    第五周课后作业
    结对作业
  • 原文地址:https://www.cnblogs.com/lunawzh/p/4845509.html
Copyright © 2011-2022 走看看