html+CSS3实现的文字闪烁特效

2017-02-28 3079 5 编辑:深圳网站建设 来源:互联网

html+CSS3实现的文字闪烁特效,将下面代码保存为.html文件即可预览。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>闪烁字体效果</title>

<style type="text/css">

/* 定义keyframe动画,命名为blink */

@keyframes blink{

  0%{opacity: 1;}

  50%{opacity: 1;}

  50.01%{opacity: 0;} /* 注意这里定义50.01%立刻透明度为0,可以设置闪烁效果 */

  100%{opacity: 0;}

}

/* 添加兼容性前缀 */

@-webkit-keyframes blink {

    0% { opacity: 1; }

    50% { opacity: 1; }

    50.01% { opacity: 0; }

    100% { opacity: 0; }

}

@-moz-keyframes blink {

    0% { opacity: 1; }

    50% { opacity: 1; }

    50.01% { opacity: 0; }

    100% { opacity: 0; }

}

@-ms-keyframes blink {

    0% { opacity: 1; }

    50% { opacity: 1; }

    50.01% { opacity: 0; }

    100% { opacity: 0; }

}

@-o-keyframes blink {

    0% { opacity: 1; }

    50% { opacity: 1; }

    50.01% { opacity: 0; }

    100% { opacity: 0; }

}

/* 定义blink类*/

.blink{

    animation: blink .75s linear infinite; 

    /* 其它浏览器兼容性前缀 */

    -webkit-animation: blink .75s linear infinite;

    -moz-animation: blink .75s linear infinite;

    -ms-animation: blink .75s linear infinite;

    -o-animation: blink .75s linear infinite;

    color: #dd4814;

}

</style>

</head>

<body>

<div id="container">

    这里是<span class="blink">闪烁字体</span>

</div>

</body>

</html>

专业的网站建设公司,深正互联,如您有网站营销需求,请您关注我们,或者致电13828884598

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联