web大作业的闪烁特效

2020-07-14

看到有同学想弄这个特效，所以我就直接放上来给大家浏览了|ω・）

注意的点
1.颜色不要太深也不要太浅，不然效果不好
2.扩散的轮廓大小可以根据px自行修改

.webname {
    float:left;
    margin-left: 10px;
    margin-top: 20px;
    width: 200px;
    height: 60px;
    line-height: 60px;
    font-family: "幼圆";
    font-weight: 700;
    font-size: larger;
    text-align: center;
    color: deepskyblue;
    /* background-color: yellow; */
    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 deepskyblue;
    }

    50% {
        text-shadow: 0 0 40px deepskyblue;
    }

    100% {
        text-shadow: 0 0 4px deepskyblue;
    }
}

@-webkit-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px deepskyblue;
    }

    50% {
        text-shadow: 0 0 40px deepskyblue;
    }

    100% {
        text-shadow: 0 0 4px deepskyblue;
    }
}

@-moz-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px deepskyblue;
    }

    50% {
        text-shadow: 0 0 40px deepskyblue;
    }

    100% {
        text-shadow: 0 0 4px deepskyblue;
    }
}


@-o-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px deepskyblue;
    }

    50% {
        text-shadow: 0 0 40px deepskyblue;
    }

    100% {
        text-shadow: 0 0 4px deepskyblue;
    }
}