div闪烁效果 css 简单例子

最新推荐文章于 2023-11-12 20:31:47 发布

原创最新推荐文章于 2023-11-12 20:31:47 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

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

偶尔需要用到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 即可。