【问题标题】: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">

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

【讨论】:

  • 感谢您提供代码,我会检查并更新您
猜你喜欢
  • 2013-08-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-09
  • 2013-11-29
  • 1970-01-01
  • 1970-01-01
  • 2023-04-01
相关资源
最近更新 更多