CSS3实现的文字弹出特效

实现效果

实现代码

html

<div>悠久资源网</div>
<div>
<span>https://www.jb51.net</span>
</div>

<p>a css3 animation demo</p>

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 文字弹出特效的资料请关注悠久资源网其它相关文章！