利用CSS3怎样做文字闪烁的效果？方法是什么？

发布时间：2023-07-26 14:09:22 所属栏目：语言来源：

导读： 用CSS3怎样做文字闪烁的效果?我们知道CSS3的功能是比较强大的，可以实现各种比较炫酷的效果。文字闪烁的展现效果有很多，下文就给大家分享三种做文字闪烁的效果方式，感兴趣的朋友可以参考。

1.通过改变透明

用CSS3怎样做文字闪烁的效果?我们知道CSS3的功能是比较强大的，可以实现各种比较炫酷的效果。文字闪烁的展现效果有很多，下文就给大家分享三种做文字闪烁的效果方式，感兴趣的朋友可以参考。

    1.通过改变透明度来实现文字的渐变闪烁，效果图：

<!DOCTYPE html>

<html>

<head>

</head>

<title>文字闪烁</title>

<body>

<div class="blink">

星星之火可以燎原

</div>

</body>

<style>

.myclass{

     letter-spacing:5px;/*字间距*/

     color: red;

     font-weight:bold;

     font-size:46px;

    }

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

@keyframes blink{

  0%{opacity: 1;}



  100%{opacity: 0;}

}

/* 添加兼容性前缀 */

@-webkit-keyframes blink {

    0% { opacity: 1; }

    100% { opacity: 0; }

}

@-moz-keyframes blink {

    0% { opacity: 1; }

    100% { opacity: 0; }

}

@-ms-keyframes blink {

    0% {opacity: 1; }

    100% { opacity: 0;}

}

@-o-keyframes blink {

    0% { opacity: 1; }

    100% { opacity: 0; }

}

/* 定义blink类*/

.blink{

color: red;

font-size:46px;

    animation: blink 1s linear infinite;

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

    -webkit-animation: blink 1s linear infinite;

    -moz-animation: blink 1s linear infinite;

    -ms-animation: blink 1s linear infinite;

    -o-animation: blink 1s linear infinite;

}

<style>

</html>

    如果不需要渐变闪烁效果，我们可以在keyframe动画中定义50%，50.1%的opacity的值。如下：

    @-webkit-keyframes blink {

        0% { opacity: 1; }

        50% { opacity: 1; }

        50.01% { opacity: 0; }

        100% { opacity: 0; }

    }

    2.利用背景图片或者背景渐变，实现文字颜色的闪烁效果，效果图：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        .blink{

     display: inline-block;

     font-size: 46px;

     margin: 10px;

     background: linear-gradient(left, #f71605, #e0f513);

        background: -webkit-linear-gradient(left, #f71605, #e0f513);

        background: -o-linear-gradient(right, #f71605, #e0f513);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation:scratchy 0.253s linear forwards infinite;

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

    -webkit-animation:scratchy 0.253s linear forwards infinite;

    -moz-animation: scratchy 0.253s linear forwards infinite;

    -ms-animation: scratchy 0.253s linear forwards infinite;

    -o-animation: scratchy 0.253s linear forwards infinite;

    }

   @keyframes scratchy {

0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

/* 添加兼容性前缀 */

@-webkit-keyframes scratchy {

    0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

@-moz-keyframes scratchy {

    0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

@-ms-keyframes scratchy {

   0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

@-o-keyframes scratchy {

   0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

    </style>

    </head>

    <body>

        <div class="blink">星星之火可以燎原</div>

    </body>

</html>

    3.通过设置text-shadow的值，来实现文字阴影闪烁的效果，效果图：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        .blink{

     font-size: 46px;

     color:#4cc134;

     margin: 10px;

     animation: changeshadow 1s ease-in infinite ;

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

    -webkit-animation: changeshadow 1s linear infinite;

    -moz-animation: changeshadow 1s linear infinite;

    -ms-animation: changeshadow 1s linear infinite;

    -o-animation: changeshadow 1s linear infinite;

    }

    @keyframes changeshadow {

        0%{ text-shadow: 0 0 4px #4cc134}

        50%{ text-shadow: 0 0 40px #4cc134}

        100%{ text-shadow: 0 0 4px #4cc134}

    }

    /* 添加兼容性前缀 */

@-webkit-keyframes changeshadow {

  0%{ text-shadow: 0 0 4px #4cc134}

          50%{ text-shadow: 0 0 40px #4cc134}

          100%{ text-shadow: 0 0 4px #4cc134}

}

@-moz-keyframes changeshadow {

    0%{ text-shadow: 0 0 4px #4cc134}

            50%{ text-shadow: 0 0 40px #4cc134}

            100%{ text-shadow: 0 0 4px #4cc134}

}

@-ms-keyframes changeshadow {

    0%{ text-shadow: 0 0 4px #4cc134}

            50%{ text-shadow: 0 0 40px #4cc134}

            100%{ text-shadow: 0 0 4px #4cc134}

}

@-o-keyframes changeshadow {

    0%{ text-shadow: 0 0 4px #4cc134}

            50%{ text-shadow: 0 0 40px #4cc134}

            100%{ text-shadow: 0 0 4px #4cc134}

}

    </style>

    </head>

    <body>

        <div class="blink">星星之火可以燎原</div>

    </body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!