这是我第一次在这里提出问题所以请告诉我我做错了什么。
所以我试图建立一个网站，我有按钮在页面加载时飞入，然后当我将鼠标悬停在鼠标上时它们会弹出（缩放更大）。已经过了2天，我仍然无法找到解决方法。当我使用＆＃34;前进＆＃34;填充模式，悬停在动画后不起作用。当我使用转换时，在页面加载时不会触发转换。此外，每个按钮在飞入时都会有一个.06秒的延迟。
由于
代码:(这是我到目前为止所做的。我使用java脚本生成按钮并计算它们的初始位置。）
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<title id="title">Jack's Desk</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.3.2.0521">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.backgroundImg {
position: absolute;
width: 100%;
height: auto;
}
.mainDiv {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mainDiv" class="mainDiv">
</div>
<script style="">
const OPACITY = 0.8;
const TRANSITION_TIME = .4;
const ANIMATION_TIME = 1.1;
//For the fly in function.
var index = 0;
var delay = 0;
for (var i = 0; i < 60; i++) {
var theButton = document.createElement("Button");
document.getElementById("mainDiv").appendChild(theButton);
theButton.innerText = "Hola number " + i;
theButton.style.position = "fixed";
theButton.style.left = Math.random() * window.innerWidth + "px";
theButton.style.top = Math.random() * window.innerHeight + "px";
flyIn(theButton, 0.06);
}
function flyIn(element, additionalDelay) {
var elementTop = element.offsetTop;
var elementLeft = element.offsetLeft;
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
var angle = Math.atan2(centerY - elementTop, elementLeft - centerX);
var newTop = - Math.sin(angle) * 390;
var newLeft = Math.cos(angle) * 390;
var newStyle = document.createElement("Style");
newStyle.type = "text/css";
newStyle.innerHTML = ".label" + index
+ "{opacity:0; -webkit-animation: flyin" + index + " 1.2s forwards; -webkit-animation-delay:" + delay + "s}"
+ "\n.label" + index + ":hover {-webkit-transform: scale(1.5, 1.5); opacity: 1.0;}"
+ "\n@keyframes flyin" + index + "{\nfrom{\n-webkit-transform: translate(" + newLeft + "px, " + newTop + "px) scale(3, 3);\n opacity: 0}"
+ "\nto{\n-webkit-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY +"\n}"
;
document.getElementsByTagName("head")[0].appendChild(newStyle);
element.className = "label" + index;
delay += additionalDelay;
index++;
}
</script>
</body>
</html>
答案 0 :(得分：0)
所以我发现一个污秽肮脏的污秽解决方法（抱歉语言）是向后设置动画。但这种方式不允许我对动画有任何延迟，因为按钮将在动画开始之前显示。我想我别无选择。不能太贪心。 ：（
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<title id="title">Jack's Desk</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.3.2.0521">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
background-color: transparent;
}
.backgroundImg {
position: absolute;
width: 100%;
height: auto;
}
.mainDiv {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mainDiv" class="mainDiv">
</div>
<script style="">
const OPACITY = 0.8;
const TRANSITION_TIME = .4;
const ANIMATION_TIME = 1.1;
//For the fly in function.
var index = 0;
var delay = 0;
for (var i = 0; i < 60; i++) {
var theLabel = document.createElement("Button");
document.getElementById("mainDiv").appendChild(theLabel);
theLabel.innerText = "Hola number " + i;
theLabel.style.position = "fixed";
theLabel.style.left = Math.random() * window.innerWidth + "px";
theLabel.style.top = Math.random() * window.innerHeight + "px";
flyIn(theLabel, 0.06);
}
function flyIn(element, additionalDelay) {
var elementTop = element.offsetTop;
var elementLeft = element.offsetLeft;
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
var angle = Math.atan2(centerY - elementTop, elementLeft - centerX);
var newTop = - Math.sin(angle) * 390;
var newLeft = Math.cos(angle) * 390;
var newStyle = document.createElement("Style");
newStyle.type = "text/css";
newStyle.innerHTML = ".label" + index
+ "{opacity: " + OPACITY + ";-webkit-transition: all " + TRANSITION_TIME + "s;\n"
+ "-webkit-animation: flyin" + index + " " + ANIMATION_TIME + "2s reverse;}"
+ "\n.label" + index + ":hover {-webkit-transform: scale(1.5, 1.5); opacity: 1.0;}"
+ "\n@keyframes flyin" + index + "{\n100%{\n-webkit-transform: translate(" + newLeft + "px, " + newTop + "px) scale(3, 3);\n opacity: 0}"
+ "\n0%{\n-webkit-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY + "!important;}"
;
document.getElementsByTagName("head")[0].appendChild(newStyle);
element.className = "label" + index;
//element.innerText = parseInt(angle * 180 / Math.PI) + ", (" + newLeft + ", " + newTop +")";
delay += additionalDelay;
index++;
}
</script>
</body>
</html>
答案 1 :(得分：0)
让我知道吗？但我认为这就是你要找的......
// HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section id="main"></section>
</body>
</html>
// JS（index.js）
document.addEventListener("readystatechange", initFly);
function initFly() {
var main = document.getElementById("main");
for (var i=0; i < 60; i++){
//
var btn = document.createElement("button");
main.appendChild(btn);
btn.innerHTML = "Hola number " + i;
btn.style.left = Math.random() * window.innerWidth + "px";
btn.style.top = Math.random() * window.innerHeight + "px";
//
var eleTop = btn.offsetTop;
var eleLeft = btn.offsetLeft;
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
var angle = Math.atan2(centerY - eleTop, eleLeft - centerX);
var newTop = Math.sin(angle) * 390;
var newLeft = - Math.cos(angle) * 390;
//
btn.style.transform = "translate("+newLeft+"px,"+newTop+"px)";
btn.style.opacity = "0.8";
}
}
// CSS（index.css）
body {
width: 100vw;
height: 100vh;
margin: 0 !important;
}
section{
position: absolute;
width: 100vw;
height: 100vh;
}
button{
opacity: 0;
cursor: pointer;
position: fixed;
transition-duration: 3s;
transition-timing-function: ease;
}
button:hover{
height: 100px;
width: 100px;
}