animation 闪烁效果实测

最新推荐文章于 2025-03-15 09:04:45 发布

zb0567

最新推荐文章于 2025-03-15 09:04:45 发布

阅读量298

点赞数

分类专栏：所见所得

本文链接：https://blog.youkuaiyun.com/zb0567/article/details/105352757

版权

所见所得专栏收录该内容

152 篇文章

订阅专栏

本文探讨了使用CSS实现元素闪烁效果的方法，包括商品图标和表格行背景的动画，通过关键帧动画控制透明度和背景颜色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.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;
        }
    }

animation 闪烁效果 实测

animation 闪烁效果实测