Question

heyo研究员必须提问，我必须制作一张有点透明的照片（如不透明度为0.4），然后它的大小会增加2倍并再次变得不透明（不透明度1）并且所有时间的文本都没有改变它的位置。

img  {
         opacity: 1;
         width: 250;
         }
         img:hover {
    opacity: 0.4;
    filter: alpha(opacity=40);
        width: 500px; 
        transition-property: width;  
  transition-duration: 4s;

                         }

我只为尺寸增加和透明度制作了css代码，但不知道如何在我的4秒动画后再次使其不透明度为1并且不知道如何使图像在图像尺寸后保持在相同的位置增加。

Answer 1

这是一个解决方案，但没有更多信息，很难给出最好的答案。你只能用css对悬停应用效果，这意味着一旦图片不再悬停，图片将恢复正常。如果您想要一个在4s后自动恢复正常的解决方案，那么您应该使用javascript。

＆＃13;

.wrapper {
  width: 100%;
}
figure {
  display: inline-block;
  width: 120px; /* It has to be bigger than twice the size of your picture if you don't want the text to move */
}
img {
  width: 50px;
  height: auto;
  -webkit-transition: width, 0, 4s;
  transition: width, 0, 4s;
}
img:hover {
  width: 100px; /* twice the original size */
  opacity: .4;
}
.text {
  display: inline-block; /* so that your text is aligned with picture */
  vertical-align: top; /* so that your text doesn't move */
}

＆＃13;

<div class="wrapper">
  <figure>
    <img src="http://lorempixel.com/100/100">
  </figure>
  <div class="text">
    Some text...
  </div>
</div>

＆＃13;

Answer 2

嗨，我没理解你的问题。但在这里，我认为你想要这样的东西。

<强> HTML

<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTCrT41Zwh43blojDO5tgu1qnsCXbz1Eu6dBiHipmGKjw-oAr7s8Q" alt>

<强> CSS

@keyframes lI{
    0%{opacity:1; transform: scale(1);}
    50%{opacity:0.4; transform: scale(1.3);}
    100%{opacity:1; transform: scale(1.3);}
}

@-webkit-keyframes lI{
    0%{opacity:1; -webkit-transform: scale(1);}
    50%{opacity:0.4; -webkit-transform: scale(1.3);}
    100%{opacity:1; -webkit-transform: scale(1.3);}
}

img{
    display: block;
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
}

img:hover{
    animation: lI 4s linear 1 forwards;
    -webkit-animation: lI 4s linear 1 forwards;
}

请检查Fiddle http://jsfiddle.net/e7zfwncn/1/。它使用CSS3动画。

Answer 3

确保将CSS中的转换添加到img而不是悬停，然后您将转换为鼠标输入和鼠标移出。

http://jsfiddle.net/shannabarnard/v7c9y6qj/

HTML

<img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42">

CSS

img  {
    opacity: 1;
    transition: all 4s ease; 
}
img:hover {
    opacity: 0.4;
    filter: alpha(opacity=40);
    width: 84px; /* twice the original size */
    height: 84px; /* twice the original size */
}

CSS（或不是）动画图像它变得透明onmouseover然后再次变得不透明

3 个答案: