html文字出现效果,CSS3实现的文字弹出特效

实现效果

实现代码

html

a css3 animation demo

css3

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body {

text-align:center;

background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);

color:#555;

font-family:'Roboto';

font-weight:300;

font-size:32px;

padding-top:40vh;

height:100vh;

overflow:hidden;

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

-webkit-transform: translate3d(0,0,0);

}

div {

display:inline-block;

overflow:hidden;

white-space:nowrap;

}

div:first-of-type { /* For increasing performance

ID/Class should've been used.

For a small demo

it's okaish for now */

animation: showup 7s infinite;

}

div:last-of-type {

width:0px;

animation: reveal 7s infinite;

}

div:last-of-type span {

margin-left:-355px;

animation: slidein 7s infinite;

}

@keyframes showup {

0% {opacity:0;}

20% {opacity:1;}

80% {opacity:1;}

100% {opacity:0;}

}

@keyframes slidein {

0% { margin-left:-800px; }

20% { margin-left:-800px; }

35% { margin-left:0px; }

100% { margin-left:0px; }

}

@keyframes reveal {

0% {opacity:0;width:0px;}

20% {opacity:1;width:0px;}

30% {width:355px;}

80% {opacity:1;}

100% {opacity:0;width:355px;}

}

p {

font-size:12px;

color:#999;

margin-top:200px;

}

以上就是CSS3实现的文字弹出特效的详细内容，更多关于CSS3 文字弹出特效的资料请关注脚本之家其它相关文章！