我试图创建一个加载屏幕上点击它会旋转得更快。有没有可能将特定的2s属性更改为y来实现这一点,或者我必须更改我已经尝试过的内容,或者是style.animation = "";
。唯一的一件事是,改变速度在css与动画不会保持速度的原因,你不能使用.loading:onclick
,它将是.loading:active
的权利?因此,它只会加快当我按住鼠标,所以我需要一个工作周围无论是css或js。
var y = 0.1;
function fast() {
document.getElementById("a").style.animation = "animateC ys linear infinite";
document.getElementById("b").style.animation = "animate ys linear infinite";
}
body
{
margin:0;
padding:0;
background:#262626;
}
.loading
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:150px;
height:150px;
background:transparent;
border:3px solid #3c3c3c;
border-radius:50%;
text-align:center;
line-height:150px;
font-family:sans-serif;
font-size:20px;
color:#fff000;
letter-spacing:4px;
text-transform:uppercase;
text-shadow:0 0 10px #fff000;
box-shadow:0 0 20px rgba(0,0,0,.5);
}
.loading:before
{
content:'';
position:absolute;
top:-3px;
left:-3px;
width:100%;
height:100%;
border:3px solid transparent;
border-top:3px solid #fff000;
border-right:3px solid #fff000;
border-radius:50%;
animation:animateC 2s linear infinite;
}
span
{
display:block;
position:absolute;
top:calc(50% - 2px);
left:50%;
width:50%;
height:4px;
background:transparent;
transform-origin:left;
animation:animate 2s linear infinite;
}
span:before
{
content:'';
position:absolute;
width:16px;
height:16px;
border-radius:50%;
background:#fff000;
top:-6px;
right:-8px;
box-shadow:0 0 20px #fff000;
}
@keyframes animateC
{
0%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(360deg);
}
}
@keyframes animate
{
0%
{
transform:rotate(45deg);
}
100%
{
transform:rotate(405deg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
</head>
<load>
<div class="loading" id="a" onclick="fast()">Loading<span id=
"b"></span></div>
</load>
</html>
3条答案
按热度按时间lvjbypge1#
我很感激你已经有了答案,但我想我会展示如何使用JavaScript与CSS Custom Property交互来控制各种元素的速度。我只是在演戏,真的,但它可能是有用的
7cjasjjr2#
是的,这是可能的-CSS
animation
属性是多个属性的缩写,其中animation-duration
设置速度。通过将
b
元素的style.animationDuration
值设置为较小的值,可以实现所需结果的一半:坏消息是:更新“a”元素上的animation duration style属性根本不起作用,可能是因为带有透明边框象限的伪元素是animated元素,而不是
.loading
元素本身。不管是什么原因,它在Firefox或Edge(我用于测试的webkit浏览器)中都不起作用。查看
.loading
元素的动画代码让我意识到,我个人会从头开始,从下往上工作-比如说一个具有相对定位的动画元素,一个子元素或伪元素,其彩色圆圈相对于边界定位,放置在一个包含“加载”消息的非动画元素的顶部,并进一步将该集合放置在页面上。如果你更喜欢尝试修改发布的代码来工作,更多的权力给你!:-)nbnkbykc3#
是的,您使用字符串设置
animation
属性的值,因此只需构建包含变量值的字符串即可。