zoukankan      html  css  js  c++  java
  • CSS解决hover选择器生硬效果

    在这里就简单的放了一张图片。来说明hover生硬的问题。现在来看,第一个代码可以实现放大缩小了。但是问题随之来了。体验太差了。这不是我想要的。。。。改进

    <style>
      img {
         100px;
        height: 100px;
        /*border-radius: 50%;
        margin-left: 45%;
        margin-top: 10%;*/
      }

      img:hover {
        /*放大图片1.3表示放大的倍数*/
        transform: scale(1.3, 1.3);
      }

    </style>
    <img src="img/bizhi.jpg" />

    改进后效果好了一点,当鼠标获取到图片的焦点时,有了动画效果。但是问题又来了。。。。。失去焦点时太难看了。。。。改进

    <style>
      img {
         100px;
        height: 100px;
        /*border-radius: 50%;
        margin-left: 45%;
        margin-top: 10%;*/
      }
      img:hover {
        /*放大图片1.3表示放大的倍数*/
        transform: scale(1.3, 1.3);
        /*在hover里面加上效果完成的时间*/
        transition: all 0.5s linear;
      }
    </style>
    <img src="img/bizhi.jpg" />

    最后问题解决了。我们应该在变化的元素上加上和hover里面一样的效果。才能在失去焦点时继续完成动画。。。。


    <style>
      img {
         100px;
        height: 100px;
        /*border-radius: 50%;
        margin-left: 45%;
        margin-top: 10%;*/
        transition: all 0.5s linear;
      }
      img:hover {
        /*放大图片1.3表示放大的倍数*/
        transform: scale(1.3, 1.3);
        /*在hover里面加上效果完成的时间*/
        transition: all 0.5s linear;
      }

    </style>
      <img src="img/bizhi.jpg" />

  • 相关阅读:
    android 自定义动画4 RotateAnimation源码分析
    Android 绘图 阴影制作(Shadow)
    view, surfaceView, invalidate, postInvalidate, 刷新屏幕
    android database 常用字段描述
    Android标题栏进度指示器使用
    ThumbnailUtils Android2.2新增类
    Android 重力感应 测试代码
    Android中内嵌字体实现个性化
    Android中悬浮窗口
    Android布局Java代码构造法
  • 原文地址:https://www.cnblogs.com/12kk/p/7661626.html
Copyright © 2011-2022 走看看