[英]random css animation on hover
我有javascript,當懸停播放動畫,但我有4種不同的動畫,我希望它每次元素懸停時隨機化
這是我的代碼
function firsthelp() {
document.getElementById('help-text').innerHTML = 'Enter your first name';
document.getElementById('help-box').style.animation ='greenhover 2s;';
document.getElementById('help-box').style.WebkitAnimation ='greenhover 2s';
}
其他CSS動畫是bluehover
orangehover
和purplehover
function getRandomAnimation(duration) {
var possibleAnimations = ["greenhover","bluehover","orangehover","purplehover"];
var randomNumber = Math.floor((Math.random()*4));
return (possibleAnimations[randomNumber] + " " + duration || "");
}
並像這樣使用它:
document.getElementById('help-box').style.animation = getRandomAnimation('2s)';
使用Math.random隨機化您的動畫
var randomNumber = Math.floor((Math.random()*4)+1);
var hover;
if(randomNumber == 1)
{
hover = 'greenhover'
}
else if(randomNumber == 2)
{
hover = 'purplehover';
}
else if(randomNumber == 3)
{
hover = 'orangehover';
}
else if(randomNumber == 4)
{
hover = 'bluehover';
}
document.getElementById('help-text').innerHTML = 'Enter your first name';
document.getElementById('help-box').style.animation =hover +' 2s;';
document.getElementById('help-box').style.WebkitAnimation =hover +' 2s';
function firsthelp() {
document.getElementById('help-text').innerHTML = 'Enter your first name';
var random_animation = ["greenhover", "bluehover", "orangehover", "purplehover"];
var number = Math.random();
var animation = random_animation[Math.floor(number * 4)] + " 2s";
document.getElementById('help-box').style.animation = animation;
}
你可以使用Math.Random
來獲得1到4或0到3之間的隨機數。這里我得到0到3之間並使用JavaScript數組來獲取動畫
var animations = new Array();
animations[0] = "greenhover";
animations[1] = "bluehover";
animations[2] = "orangehover";
animations[3] = "purplehover";
var randomNo = Math.floor(Math.random() * 4);
document.getElementById('help-text').innerHTML = 'Enter your first name';
document.getElementById('help-box').style.animation =animations[randomNo] +' 2s;';
document.getElementById('help-box').style.WebkitAnimation =animations[randomNo]+' 2s';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.