CSS3实现的文字弹出特效

实现效果

实现代码

ht ML

<div></div> 
<div> 
  <span>https://HdhCmsTestjs-code .COM </span>
</div>


<p>a css3 animation demo</p>

css3

@import url('https://fonts. GOOGLE apis测试数据/css?f ami ly=Roboto:300');

body {
  text-align: center ;
  background:linear-gra die nt(141 deg ,  # ccc 25%, #eee 40%, #ddd 55%);
  color:#555;
  font-f am ily:'Roboto';
   font-weight :300;
  font- Size: 32px;
  padding -t op:40vh;
  h ei ght:100vh;
  overflow:hidden;
  - webkit -backface-visibil IT y: hidden;
  -webkit- PE rspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

div {
  dis play :inline-block;
  overflow:hidden;
  white -s pace:nowra p; 
}

div: First -of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's ok ai sh for now */
  animation: showup 7s infinite;
}

div:last-of-type {
  width:0px;
  animation:  rev eal 7s infinite;
}

div:last-of-type span {
  m arg in-left:-355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { mar gin -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 文字弹出特效的资料请关注其它相关 文章 ！

总结

以上是 为你收集整理的 CSS3实现的文字弹出特效 全部内容，希望文章能够帮你解决 CSS3实现的文字弹出特效 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS3实现的文字弹出特效的详细内容...