Question

这种css语言对我来说都是新手，如果可能，我只是有几个问题。像图像一样在它周围发光，或者从较浅的不透明度变为原始颜色，如此 - ＆gt; （output.jsbin.com/vahaseduka)// codepen.io/anon/pen/ilqnb(CAMERA IMAGE是我将使用的实际图像）

我使用某人的示例代码来实现此效果。

除了两个品质外，我对这个形象感到满意。 *悬停时，盒装边框将如此出现---＆gt; i59.tinypic.com/2dmayyv.jpg ....我不喜欢那个框架（盒子）悬停时，我可以如何删除它？

另外正如我们所看到的那样，如果没有滚动条，我无法将照片重新调整大小为id？我使用wix.com来构建网站，这是与网站的兼容性问题？或者，我应该缩小Photoshop中的图像尺寸吗？

该项目的代码是：

＆＃13;

    #ex5 {
      width: 700px;
      margin: 0 auto;
      min-height: 300px;
      background: transbox;
    }
    #ex5 img {
      margin: 0px;
      opacity: 0.8;
      border: 0px transbox #eee;
      /*Transition*/
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      /*Reflection*/
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.1)));
    }
    #ex5 img:hover {
      opacity: 1;
      /*Reflection*/
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.4)));
      /*Glow*/
      -webkit-box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
      -moz-box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
      box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.8);
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <style>
  </style>
</head>

<body>
  <div id="ex5">
    <img src="http://i57.tinypic.com/2poqqsn.png">

  </div>
</body>

</html>

＆＃13;

Answer 1

出现滚动条是因为边框正在有效地更改框大小。我建议你阅读the box model。

对于您的特定问题，请尝试将box-sizing: border-box;添加到您的图片#ex5 img，它可以帮助您避免出现这些滚动条，因为您正在设置CSS的宽度/高度。其他hacky /丑陋的方法是设置overflow: hidden;，这可能会使您的图像在边界附近裁剪并产生不良结果。

Answer 2

清除此风格

border: 0px transbox #eee;

并将高度属性分配给图像标记（在您的情况下为＃ex5 img），如

height:150px;  //your figure

如果再次出现问题，请通知

此链接将帮助您成为优秀的网页设计师http://www.w3schools.com/

Answer 3

只需在您的网页上创建此样式即可

<style>
   @keyframes bounce {
0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    }
}

img:hover {   //you may replace button with any tag
    animation: bounce 1s;
}

</style>

<div id="ex5">
    <img id="img1" class="anim" src="http://i57.tinypic.com/2poqqsn.png">
    <img id="img2" class="anim" src="http://i57.tinypic.com/2poqqsn.png">
    <br>
    <img id="img3" src="http://i57.tinypic.com/2poqqsn.png">
    <img id="img4" src="http://i57.tinypic.com/2poqqsn.png">

</div>

<html>

我只是替换了样式

button:hover{..} <--with -->
img:hower{..}

但请记住，伙计，img，button，div是标签。

假设您认为页面中有很多img标记。

这样悬停效果会影响网页上的整个img。

我建议你创建一个由class或id定义的样式。

 /*Eg:-
  for class, use a dot sign before the class name which you want to give  style*/

.anim:hover {  
   animation: bounce 1s;
}

/*for ID, use # sign before the name of ID any name of your ID defined on your html page(i define 4 id, img1,img2,img3,img4) */


   #img3:hover {  /*It animates only img named #img3 */
   animation: bounce 1s;
}

/*for tag, use nothing ,only name of tag that you want to apply style*/

.anim:hover {  
   animation: bounce 1s;
}

这是创建样式的方法。我更新了这个链接。通过它或

在JSfiddle Click to see in Fiddle

中试试这个

如果有任何问题，请通知我美好的一天......

悬停时图像发光

3 个答案: