+86-13828884598

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

61832017-02-28編輯:深圳网站建设來源:互联网 在線PDF預覽

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

文章引用:https://www.hkhulian.com/infos/615.html
本文之圖文訊息香港網頁設計,香港App開發公司——香港互聯摘自互聯網,如有版權糾紛或違規,請聯繫我們刪除,谢谢。

上一篇: 暫無

下一篇: 暫無

感謝您訪問香港互聯,我們用13年的技術實力用心為您服務

高端網頁設計 • App定制開發 • 網路推廣服務

我們推薦直接電話溝通
+86-13828884598
9:00~18:30
+86-75536630177
szhulian@qq.com
香港互聯微信好友

掃碼微信加好友
請您標注微信說明

請提交您的需求

5 香港互聯微信好友
掃一掃,微信溝通