【问题标题】:On load page CSS image transform scale smoothly (change image size on page load) [closed]在加载页面 CSS 图像变换平滑缩放(在页面加载时更改图像大小)[关闭]
【发布时间】:2013-08-28 05:53:19
【问题描述】:

这是我的link。 当我单击并单击图标时,它会变得比其他图标更大,以提示您在哪个页面上。 我需要它来平滑地转换比例(图标会平滑地变大)。

【问题讨论】:

  • 请在此处发布您尝试完成此操作的相关代码部分。
  • 我是说在这里发布您的代码,StackOverflow 用于发布您拥有的代码的问题,问题应该包含需要帮助的代码
  • 我需要活动链接突出,我在每个页面上分别增加图标大小
  • 正如帕特里克所说,您需要发布您的尝试,我们可以从那里为您提供帮助。查看您的 html 时我要说的一件事是,您应该使用 display: inline-block; 将表格更改为分隔符,以便它们可以在较小的(移动)屏幕上重新排列/堆叠。

标签: css transform css-transitions scale transition


【解决方案1】:

这个 CSS 代码会做你想做的事:

.zoom {
    -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
    -ms-transition:all 1s linear;
    -o-transition:all 1s linear;
    transition:all 1s linear;
}

.zoom:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);
}

【讨论】:

    【解决方案2】:
    #itemdisplay{
        width: 200px;
        height: 250px;
        border: 5px solid #fff;
        -webkit-transition: all .2s ease-in-out;
        background: #ff0;
    }
    #itemdisplay:hover{
        -webkit-transform: scale(1.1);
    }
    

    【讨论】:

      【解决方案3】:

      我使用 css 中使用的简单技术完成了此操作,将图标的宽度保留在相应页面上,然后添加 id。

      <td id="zoom"><a href="visualization.html"><img src="image/bubble_plus3.png" width="150" /></a></td>
      

      还有css:

      #zoom img {
      /*transform:scale 1s;
      animation: scale 1s;*/
      -moz-animation: scale 0.5s; /* Firefox */
      -webkit-animation: scale 0.5s; /* Safari and Chrome */
      -o-animation: scale 0.5s; /* Opera */
      margin-top:-20px;}
      @keyframes scale {
      from {
          width:107px;
      }
      to {
          width:150px;
      }}
      @-moz-keyframes scale { /* Firefox */
      from {
          width:107px;
      }
      to {
          width:150px;
      }}
      @-webkit-keyframes scale { /* Safari and Chrome */
      from {
          width:107px;
      }
      to {
          width:150px;
      }}
      @-o-keyframes scale { /* Opera */
      from {
          width:107px;
      }
      to {
          width:150px;
      }}
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-02-22
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-08-23
        相关资源
        最近更新 更多