Question

我想在我的HTML网页上显示文本，该文本基本上会通过淡入而“闪烁”，并在动画之间有1秒钟的间隔不断地退出。必须严格使用JS，CSS和jQuery来完成此操作。

我的想法如下：

 *Creating a div strictly for the text

 *Creating a function to house our JS

 *Create the fade animation by adjusting div style.opacity

我已经使用CSS完美地完成了这一工作，但我完全不知道从严格的JS入手。

这就是我在CSS中所做的：

    @keyframes fadeIn { 
  from { opacity: 0; } 
}
.play {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    animation: fadeIn 1s infinite alternate;
}

如果我仅使用JS，有人可以指出我应该做什么的正确方向吗？

Answer 1

添加一个setinterval函数，并在函数内部将CSS切换为文本这是我尝试过的代码。希望对您有帮助。

var speed = 1000; 
var t = setInterval(function(){
  var slideSource = document.getElementById('textnode');
  slideSource.classList.toggle('fade');
}, speed);

#textnode {
  opacity: 1;
  transition: opacity 1s; 
}

#textnode.fade {
  opacity: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="textnode">Sample Text</div>

</body>
</html>

Answer 2

如果您不能使用CSS样式表，但可以使用嵌入式CSS。

var opacity = 1;
var change = -0.1;
var blinky = document.getElementById('blinky');
setInterval(function() { 
  blinky.style.color='hsla(210, 100%, 50%, '+opacity+')';
  if (opacity < -0.9) {
    change = 0.1;
    opacity = 0;
  } else if (opacity > 0.9) {
    change = -0.1;
  }
  opacity = opacity + change;
}, 100);

<div id="blinky">Blinky</div>

小提琴

https://jsfiddle.net/Hastig/t3dz62ck/

使用严格的JS / HTML创建文本淡入/淡出

2 个答案: