css平行六变形动画效果

CSS是一种常用的网页样式设计语言，它可以帮助我们实现各种炫酷的动画效果。今天，我们要介绍的是CSS平行六边形变形动画效果。以下是该效果的实现代码：

.hexagon{
      width: 100px;
      height: 55px;
      background-color: #ff7675;
      position: relative;
      margin: 27.5px 0;
      transition: all 0.5s ease-out;
      transform-origin: 50% 50%;
}
.hexagon:before,.hexagon:after{
      content: "";
      position: absolute;
      width: inherit;
      height: inherit;
      background-color: inherit;
      transition: inherit;
}
.hexagon:before{
      transform: rotateZ(120deg);
}
.hexagon:after{
      transform: rotateZ(-120deg);
}
.hexagon:hover{
      transform: skewY(10deg) scale(1.2);
}
.hexagon:hover:before{
      transform: rotateZ(110deg) skewY(10deg);
}
.hexagon:hover:after{
      transform: rotateZ(-110deg) skewY(10deg);
}
    

上面的代码中，我们定义了一个名为“.hexagon”的元素，它是一个带有背景颜色的平行六边形。我们使用“:before”和“:after”伪元素来创建两个旋转了120度的三角形，它们组成了一个完整的六边形。我们使用了CSS3的transform属性，来将这两个三角形旋转成六边形的形状。

接下来，我们使用hover伪类来定义鼠标悬停在“.hexagon”元素上时的效果。我们使用transform属性来实现倾斜和放大的效果，同时我们也需要对“:before”和“:after”伪元素做相应的调整，来保证整体的变形效果。

最终，我们得到了一个非常炫酷的平行六边形变形动画效果，让我们的网页看起来更加生动有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！