div闪烁效果 css 简单例子

最新推荐文章于 2025-04-18 19:21:55 发布

罗汉松驻扎的工作基地

最新推荐文章于 2025-04-18 19:21:55 发布

阅读量1.6k

点赞数 2

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/MFCdestoryer/article/details/121773127

版权

这篇博客展示了如何使用CSS实现一个简单的div元素背景颜色在黄色和橙色之间闪烁的动态效果。通过定义关键帧动画`@keyframes`，并应用到`.highlight`类上，实现了颜色的平滑切换。示例中包含多个带有该效果的div，可用于网页中的标记或其他视觉指示。

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

偶尔需要用到div闪烁的动态效果，以下是一个简单的例子。写的不好，请见谅。

css如下：我是从黄色变成橙色的动态效果，你可以自己修改颜色

.highlight {
    animation: myfirst 5s;
    animation-iteration-count: infinite;
}


@keyframes myfirst {
    0% {
        background: orange;
    }


    25% {
        background: yellow;
    }


    50% {
        background: orange;
    }


    100% {
        background: yellow;
    }
}

html使用如下

  <div>
        <p>test page</p>
        <img src="~/Content/map.png" />

        <div style="background-color:yellow;height:12px;width:12px;top:200px;left:200px;position:fixed;z-index:100;" title="M1" class="stopPoint highlight">&nbsp;</div>
        <div style="background-color:yellow;height:12px;width:12px;top:300px;left:200px;position:fixed;z-index:100;" title="M2" class="stopPoint highlight">&nbsp;</div>
        <div style="background-color:yellow;height:12px;width:12px;top:400px;left:200px;position:fixed;z-index:100;" title="M3" class="stopPoint">&nbsp;</div>
        <div style="background-color:yellow;height:12px;width:12px;top:500px;left:200px;position:fixed;z-index:100;" title="M4" class="stopPoint">&nbsp;</div>

    </div>

然后使用jquery 增加或者 css 即可。