[分享]css3文字动态特效代码

CSS3文字动态特效是一种让网页更加生动有趣的技术，可以用来增添网页的互动性和视觉效果。下面我们来看看一些CSS3文字动态特效的代码。/1、闪烁效果/ keyframes blink { 50 { o...

CSS3文字动态特效是一种让网页更加生动有趣的技术，可以用来增添网页的互动性和视觉效果。下面我们来看看一些CSS3文字动态特效的代码。

/*1、闪烁效果*/
@keyframes blink {  
   50% { opacity: 0; }  
}
p {
    animation: blink 1s infinite;
}

/*2、打字动画效果*/
@keyframes typing{  
    from{ width: 0; }  
}  
p::before {  
    content:""; display:inline-block; vertical-align:bottom;
    height:1.5em; width:0;
    margin-right:-0.5em;
    border-right: 0.15em solid rgba(255,255,255,0.75);
    animation: typing 2s infinite;
}

/*3、弹性字体效果*/
@keyframes bounce {
    0%,100% {
        transform: translateY(0%);
        animation-timing-function: ease-in-out;
    }
    50% {
        transform: translateY(-50%);
        animation-timing-function: ease-in-out;
    }
}
p {
   animation: bounce 1.5s infinite;
}

/*4、背景色渐变效果*/
@keyframes gradient {
    0% { background-color: #00c;}
    50% { background-color: #9cf;}
    100% { background-color: #00c;}
}
p {
   animation: gradient 4s infinite;
}

以上的几个CSS3文字动态特效的代码都是基于关键帧动画的实现方式。使用关键帧动画可以设置多个关键帧，从而达到更加手绘和自然的动态效果。有了这些代码的帮助，我们可以为网页添加更多的魔力，让网页赢得更多用户的青睐。