CSS3-动画-文字闪烁

文字闪烁是一种动画,在css中要达到类似的效果,除了使用js设置修改,第一时间想到的就是css中的animation(动画)了。

CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

浏览器支持

CSS3动画属性

那么就用已有的这些知识,做个文字闪烁的功能:
代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 36px;
            font-weight: bold;
            color: red;
            animation: blink 2s linear infinite;
            -webkit-animation: blink 2s linear infinite;
            -moz-animation: blink 2s linear infinite;
            -ms-animation: blink 2s linear infinite;
            -o-animation: blink 2s linear infinite;
        }

        @keyframes blink {
            0% {
                color: red;
            }

            50% {
                color: transparent;
            }

            100% {
                color: red;
            }
        }
    </style>
</head>
<body>
    <p>中国,加油!</p>
</body>
</html>
测试结果

作者:张中华
链接:https://www.jianshu.com/p/8cdd030199f4
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兼职人人是一家专门针对站长资源服务的网站,主要分享红包活动,网上赚钱方法,破解软件,站长资源,技术教程等资源下载,为站长提供有价值内容的资源网。maixueji.com 造雪机