css - 复制 CSS3 文本排列/飞入

Question

我正在尝试复制此视频中的 CSS 文本:

https://www.youtube.com/watch?v=QZpZ1zRcR6c&t=537s

但是，当我运行我的代码时，它会导致字母被变换但静止不动。这些字母是随机放置的，但它们不会飞到它们的内联 block 显示。我试图在一个函数中动态地完成这一切，所以它可能有点困惑。我不确定我在这里做错了什么......

  var congratsPhrases = ["Awesome!", "Wonderful!", "Great Job!", "Fantastic!", "Terrific!", "Superb!", "Amazing!", "Brilliant!", "Well Done!", "Excellent!", "Nice Work!", "Bravo!", "Perfect!", "Genius!"];

function congratulateUser(){

  // empty body, background color black, pick a random congratulatory message
  $("body").empty();
  $("body").css({"background-color":"black"}).append(`<ul class="text-animate hidden" id="congratsUL"></ul>`);
  var congratsInd = Math.floor(Math.random()*congratsPhrases.length);
  var randomCongratsMessage = congratsPhrases[congratsInd];

  // CSS transition
  $("#congratsUL").css({"position":"absolute", "top":"50%", "left":"50%", "list-style-type":"none", "transform":"translateX(-50%) translateY(-50%)"});
  for (var i = 0; i < randomCongratsMessage.length; i++) {
    $("#congratsUL").append(`<li>${randomCongratsMessage[i]}</li>`);
    $("#congratsUL li").css({"color":"white", "margin-right":"30px", "opacity":"1", "display":"inline-block", "font-size":"3.5em", "font-family":"'Bungee Shade', 'Helvetica Neue', Helvetica, Arial", "transition":"all 2.5s ease"});

    $("#congratsUL li:last-child").css({"margin-right":"0"});
    // get random number between 1 & 300 that is either positive or negative
    var randomNum = Math.floor(Math.random()*250) + 1;
    randomNum *= Math.floor(Math.random()*2) === 1 ? 1 : -1;
    // position the li elements on the page randomly
    $(`#congratsUL.hidden li:nth-child(${i+1})`).css({"transform":`translateX(${randomNum}px) translateY(${randomNum}px)`, "opacity":"0"});
  }
  setTimeout(function(){
    $("#congratsUL").removeClass("hidden")
  }, 500);
}

Answer 1

问题是您正在添加内联 CSS，因此当您删除 hidden 时来自 ul 的类(class), lis 的内联样式仍然存在。您可以使用 !important 覆盖内联样式在 CSS 中:

var congratsPhrases = ["Awesome!", "Wonderful!", "Great Job!", "Fantastic!", "Terrific!", "Superb!", "Amazing!", "Brilliant!", "Well Done!", "Excellent!", "Nice Work!", "Bravo!", "Perfect!", "Genius!"];

function congratulateUser(){

  // empty body, background color black, pick a random congratulatory message
  $("body").empty();
  $("body").css({"background-color":"black"}).append(`<ul class="text-animate hidden" id="congratsUL"></ul>`);
  var congratsInd = Math.floor(Math.random()*congratsPhrases.length);
  var randomCongratsMessage = congratsPhrases[congratsInd];

  // CSS transition
  $("#congratsUL").css({"position":"absolute", "top":"50%", "left":"50%", "list-style-type":"none", "transform":"translateX(-50%) translateY(-50%)"});
  for (var i = 0; i < randomCongratsMessage.length; i++) {
    $("#congratsUL").append(`<li>${randomCongratsMessage[i]}</li>`);
    $("#congratsUL li").css({"color":"white", "margin-right":"30px", "opacity":"0", "display":"inline-block", "font-size":"3.5em", "font-family":"'Bungee Shade', 'Helvetica Neue', Helvetica, Arial", "transition":"all 2.5s ease"});

    $("#congratsUL li:last-child").css({"margin-right":"0"});
    // get random number between 1 & 300 that is either positive or negative
    var randomNum = Math.floor(Math.random()*250) + 1;
    randomNum *= Math.floor(Math.random()*2) === 1 ? 1 : -1;
    // position the li elements on the page randomly
    $(`#congratsUL.hidden li:nth-child(${i+1})`).css({"transform":`translateX(${randomNum}px) translateY(${randomNum}px)`});
  }
  setTimeout(function(){
    $("#congratsUL").removeClass("hidden")
  }, 500);
}

congratulateUser();

ul:not(.hidden) li {
    transform: translateX(0px) translateY(0px) !important;
    opacity:1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者，您可以清除 timeout 上的内联样式而不是删除 ul 的类:

var congratsPhrases = ["Awesome!", "Wonderful!", "Great Job!", "Fantastic!", "Terrific!", "Superb!", "Amazing!", "Brilliant!", "Well Done!", "Excellent!", "Nice Work!", "Bravo!", "Perfect!", "Genius!"];

function congratulateUser(){

  // empty body, background color black, pick a random congratulatory message
  $("body").empty();
  $("body").css({"background-color":"black"}).append(`<ul class="text-animate" id="congratsUL"></ul>`);
  var congratsInd = Math.floor(Math.random()*congratsPhrases.length);
  var randomCongratsMessage = congratsPhrases[congratsInd];

  // CSS transition
  $("#congratsUL").css({"position":"absolute", "top":"50%", "left":"50%", "list-style-type":"none", "transform":"translateX(-50%) translateY(-50%)"});
  for (var i = 0; i < randomCongratsMessage.length; i++) {
    $("#congratsUL").append(`<li>${randomCongratsMessage[i]}</li>`);

    $("#congratsUL li:last-child").css({"margin-right":"0"});
    // get random number between 1 & 300 that is either positive or negative
    var randomNum = Math.floor(Math.random()*250) + 1;
    randomNum *= Math.floor(Math.random()*2) === 1 ? 1 : -1;
    // position the li elements on the page randomly
    $(`#congratsUL li:nth-child(${i+1})`).css({"transform":`translateX(${randomNum}px) translateY(${randomNum}px)`, "opacity":"0"});
  }
  setTimeout(function(){
    $("#congratsUL li").attr("style","");
  }, 500);
}

congratulateUser();

#congratsUL li {
  color:white;
  margin-right:30px;
  opacity:1;
  display:inline-block;
  font-size:3.5em;
  font-family:'Bungee Shade', 'Helvetica Neue', 'Helvetica, Arial';
  transition:all 2.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>