代码之家 › 专栏 › 技术社区 › Eric Sartorius

悬停旋转时不需要的CSS多边形边框

stylus hover animation css

Eric Sartorius · 技术社区 · 8 年前

我在CSS中制作了一个T恤形的多边形,除非我尝试在悬停时对其进行动画处理,否则它会显示得很像。当我悬停时,我会得到一个右下边界,颜色与动画发生时多边形的背景颜色相同。动画完成后,边界再次消失。我尝试了从改变边框大小/颜色和背景等一切,但都没有改变。这就是我现在拥有的(但在Stylus中)。。。

 .shirt {
      background: darken(#1e90ff, 40%);
      width: 100px;
      height: 100px;
      margin:  20px auto;
      -webkit-clip-path: polygon(68% 5%, 32% 5%, 0 24%, 9% 44%, 25% 36%, 25% 90%, 75% 90%, 75% 36%, 91% 44%, 100% 24%);
      clip-path: polygon(68% 5%, 32% 5%, 0 24%, 9% 44%, 25% 36%, 25% 90%, 75% 90%, 75% 36%, 91% 44%, 100% 24%);
 }

 .shirt:hover {
   transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -webkit-transition: -webkit-transform 3s ease;
 }

有什么建议吗?这是密码笔 http://codepen.io/EricSSartorius/pen/BjZyLb?editors=010