Question

所以有两个代码我真的想要合并，因为每个代码都缺少另一个代码，我不知道如何。（非常非常新编码！：/）

主要目标是：在打开我的网页时，能够通过以类似打字机的方式“打字”来引用/段落*淡入。在短暂的延迟之后，它会淡出，并被替换为不同的引用，就像第一个引用一样输入自己，依此类推，有许多不同的引号。

*我说“quote / paragraph”因为我希望能够在多行上输入报价，如果很长 - 不只是一条很长的连续线！

Here是我想要的一个例子，但它缺少淡入和淡出另一个不同的文本。

HTML：

<link href="http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise"   rel="stylesheet" type="text/css" />


<body>
<div id="typedtext"></div>
</body>

CSS：

body {
font-family: 'Waiting for the Sunrise', cursive; 
font-size:30px; 
margin: 10px 50px; 
letter-spacing: 6px; 
font-weight: bold;
}

JS：

// set up text to print, each item in array is new line
var aText = new Array(
"There are only 10 types of people in the world:", 
"Those who understand binary, and those who don't"
);
var iSpeed = 100; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines

var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row

function typewriter()
{
sContents =  ' ';
iRow = Math.max(0, iIndex-iScrollAt);
var destination = document.getElementById("typedtext");

while ( iRow < iIndex ) {
sContents += aText[iRow++] + '<br />';
}
destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) +      "_";
if ( iTextPos++ == iArrLength ) {
iTextPos = 0;
iIndex++;
if ( iIndex != aText.length ) {
iArrLength = aText[iIndex].length;
setTimeout("typewriter()", 500);
}
} else {
setTimeout("typewriter()", iSpeed);
}
}


typewriter();

然后here将是简单的（至少它看起来很简单？）用我设想的不同引号淡入淡出。

HTML：

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

CSS：

.quotes {display: none;}

JS：

(function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}

showNextQuote();

})();

另外，我希望更改字体大小，颜色，样式等，但我使用的网站只让我通过HTML输入，所以没有CSS ...（我不知道你是否可以只是某种方式将CSS内容直接包含在HTML中或者不包含......对不起我是个dingus。:(）这可能很简单，但我不是程序员 - 只是有远见的人。你能提供的任何帮助都会令人难以置信理解!!

提前致谢!!!

Answer 1

此代码仅使用html和css https://codepen.io/rusjames/pen/uAFhE

/* Inspired by Lea Verou's http://lea.verou.me/more-css-secrets/*/

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 ♥ by 
  <a href="https://twitter.com/@samarkandiy" title="Azik Samarkandiy">@samarkandiy</a> 
:)<span>|</span></p>

引用段落通过打字机方式淡入和淡出来互相替换

1 个答案: