css3动画效果库,如何在游戏网页中实现动画效果

css3动画效果库,如何在游戏网页中实现动画效果详细介绍

/*以下为可复用的CSS代码部分*/.cover{position: absolute;width: 800px; height: 445px; top: 20%;left: 20%;z-index: 2;}/*cover和svg的宽高位置都重合，唯一不同的是z-index属性*/svg {position: absolute;width: 800px; height: 445px; top: 20%;left: 20%;overflow: visible;z-index: 1;}polygon{transition:all 1s ease;transform-origin: 50% 50%; }/*以下为设定的6组动画效果*/.cover:hover + svg #lowpoly polygon:nth-of-type(6n+1){transform: translate(-400% , -400%) scale(1.5) rotate(100deg);opacity: .3}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+2){transform: translate(800% , -400%) scale(1.1) rotate(200deg);opacity: .4;}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+3){transform: translate(-800% , 400%) scale(1.2) rotate(200deg);opacity: .3;}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+4){transform: translate(-400% , 800%) scale(1.4) rotate(200deg);opacity: .4}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+5){transform: translate(400% , 400%) scale(1.3) rotate(100deg);opacity: .3}.cover:hover + svg #lowpoly polygon:nth-of-type(6n+6){transform: translate(800% , 400%) scale(1.2) rotate(200deg);opacity: .3}