我正在尝试复制此视频中的 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);
}
最佳答案
问题是您正在添加内联 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>
关于css - 复制 CSS3 文本排列/飞入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42842623/