Question

我在下面的HTML代码中使用了CSS3菱形，但这不符合我的要求我需要钻石形状和悬停动画，检查我的代码

＆＃13;

  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%);
}

＆＃13;

  <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>

＆＃13;

Answer 1

如果你想添加一个悬停动画，你可以使用像这样的CSS

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

使用此html

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

或者你想要一个真正的钻石动画转动？

css3钻石形状与悬停动画

1 个答案: