html+CSS3實現的文字閃爍特效

2017-02-28 3321 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

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾