我可以使用哪种编程语言将其实现到我的网站中?

时间:2017-04-23 13:17:18

标签: html

我可以使用哪种编程语言来实现用户屏幕上显示的移动文本,例如example。有人可以推荐我任何教程,我也可以观看,以了解如何做到这一点并获得一个基本的起始模板。

由于最近开始,我只知道如何使用html,css&引导。

1 个答案:

答案 0 :(得分:2)

您可以使用css3 animations执行此操作,如下所示。

body{
  background: #000;
  padding-top: 10px;
} 

p{
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a{
  color: lime;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

::selection{
  background: black;
}
<p>hi folks, this is typing animation using CSS</p>
<p>created with ♥ 
:)<span>|</span></p> 

来源:https://codepen.io/rusjames/pen/uAFhE