animation 闪烁效果 实测

.commodity-sign-wrap{
	animation:blink 1s infinite;
	-webkit-animation:blink 1s infinite; /*Safari and Chrome*/
}
@keyframes blink{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 100;
	}
	100%{
		opacity: 0;
	}
}
@-webkit-keyframes blink{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 100;
	}
	100%{
		opacity: 0;
	}
}

效果并不是很好,而且chrome并没有那么不近人情

/* 表格背景颜色闪烁 */
    .el-table .bling-row {
        animation: bgflash 1s infinite;
        -webkit-animation: bgflash 1s infinite; /*Safari and Chrome*/
    }

    @keyframes bgflash {
        50% {
            background-color: #f56c6c;
        }
    }                                   这种貌似实现我想要的结果

    @-webkit-keyframes bgflash {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 100;
            background-color: #f56c6c;
        }
        100% {
            opacity: 0;
        }
    }

猜你喜欢

转载自blog.csdn.net/zb0567/article/details/105352757