/* 无限循环往下往复淡入淡出运动 */%auto-down-animate {animation: auto-down-animate 1s ease-in-out infinite;-moz-animation: auto-down-animate 1s ease-in-out infinite;/** Firefox */-webkit-animation: auto-down-animate 1s ease-in-out infinite;/** Safari 和 Chrome */-o-animation: auto-down-animate 1s ease-in-out infinite;/** Opera */@keyframes auto-down-animate {0% {opacity: 0;top: 0px;}50% {opacity: 1;top: 13px;}100% {opacity: 0;top: 27px;}}@-moz-keyframes auto-down-animate {0% {-moz-transform: rotate(0deg);}50% {-moz-transform: rotate(180deg);}100% {-moz-transform: rotate(360deg);}}@-webkit-keyframes auto-down-animate {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(360deg);}}@-ms-keyframes auto-down-animate {0% {-ms-transform: rotate(0deg);}50% {-ms-transform: rotate(180deg);}100% {-ms-transform: rotate(360deg);}}@-o-keyframes auto-down-animate {0% {-o-transform: rotate(0deg);}50% {-o-transform: rotate(180deg);}100% {-o-transform: rotate(360deg);}}
}/*移入终止向下无线循环动效*/
&:hover {&::after {top: 0;bottom: 0;animation-iteration-count: 0;-webkit-animation-iteration-count: 0; /* Safari 和 Chrome */}}
/*覆盖半透明黑色*/ :after { /*父元素需要 position: relative;*/content: '';background: rgba(0, 0, 0, 0.38);position: absolute;left: 0;top: 0;width: 100%;height: 100%; }...