带有悬停动画的css3菱形答案

【问题标题】：css3 diamond shape with hover animation带有悬停动画的css3菱形
【发布时间】：2017-07-24 20:33:28
【问题描述】：

我在下面的 HTML 代码中使用了 CSS3 菱形，但这不能满足我的要求，我需要菱形和悬停动画，检查我的代码

  img.clip {	
  -webkit-clip-path: polygon(50% 78%, 0 0, 100% 0);	
  clip-path: polygon(50% 78%, 0 0, 100% 0);
}
  
img.tclip {	
    -webkit-clip-path: polygon(100% 100%, 50% 90%, 50% 90%, 0 100%);	
    clip-path: polygon(100% 100%, 50% 90%, 50% 90%, 0 100%);
}

  <a href="#"> 
   <img src="https://www.w3schools.com/css/img_fjords.jpg" 
    class="tclip"/>
   <img src="https://www.w3schools.com/css/img_fjords.jpg" 
    class="clip"/>
</a>

【问题讨论】：

就目前而言，尚不清楚您到底想要实现什么。请帮助我们了解预期的最终结果。
请查看链接jsfiddle.net/434496yd
我需要悬停动画
你试过什么？我看到您的代码中绝对没有悬停。
我尝试过悬停 3d 动画，但它不起作用

标签： css animation shape

【解决方案1】：

如果要添加悬停动画，可以这样使用css

#diamond{
  transition: 3s all;
}
#diamond:hover {
  opacity: 0.5; //here your second state, on hover
}

用这个html

<a href="#" id="diamond">

或者您可能想要真正的钻石车削动画？

【讨论】：

感谢您提供代码，我会检查并更新您