几种css3实现的特效效果

1.文字跑马灯

<div id="welcome" style="font-size: 20px;text-align: right;">
    <font color="#2E6DA4">Welcome </font>
    <font color="#398439">to </font>
    <font color="yellow">my </font>
    <font color="red">blog !!!</font>
</div>
<style>
    /*欢迎跑马灯*/
    #welcome {
        display: block;
        width: 100%;
        text-align: right;
        overflow: hidden;
        -webkit-animation: marquee 20s linear infinite;
        animation: marquee 20s linear infinite;
    }

    @-webkit-keyframes marquee {
        0% {
            transform: translateX(15%);
        }
        100% {
            transform: translateX(-100%); 
        }
    }

    @keyframes marquee {
        0% {
            transform: translateX(15%);
        }
        100% {
            transform: translateX(-100%); 
        }
    }

    @-webkit-keyframes marquee {
        0% {
            transform: translateX(15%);
        }
        100% {
            transform: translateX(-100%); 
        }
    }

2.闪烁动画

 <div id="plusDiv"></div>
 <style>
    #plusDiv {
        margin-left: 100px;
        margin-top: 100px;
        width: 18px;
        height: 18px;
        /*transform: translate3d(0px, 0px, 0px);*/
        position: relative;
        outline: none;
        background-color: rgba(221,82,77,0.5);
        box-shadow: 1px 1px 8px 0 rgba(221,82,77,0.5);
        border-radius: 100%;
        transform-origin: 0 0;
        display: block;
        opacity: 0.7;
    }

    #plusDiv::after {
        content: "";
        -webkit-border-radius: 100%;
        border-radius: 100%;
        height: 300%;
        width: 300%;
        position: absolute;
        margin: -100% 0 0 -100%;
        box-shadow: 0 0 6px 2px rgba(221,82,77,0.5);
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite; /*无穷反复*/
        animation-delay: 1.1s;
    }

    @keyframes pulsate {
        0% {
            transform: scale(0.1, 0.1);
            opacity: 0;
            filter: alpha(opacity=0);
        }
        50% {
            opacity: 1;
            filter: none;
        }
        100% {
            transform: scale(1.2, 1.2);
            opacity: 0;
            filter: alpha(opacity=0);
        }
    }
</style>