html 可以使用JavaScript来改变div的animation属性吗？在点击时

oewdyzsn  于 8个月前  发布在  Java
关注(0)|答案(3)|浏览(68)

我试图创建一个加载屏幕上点击它会旋转得更快。有没有可能将特定的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>
Html

3条答案

按热度按时间
lvjbypge

lvjbypge1#

我很感激你已经有了答案，但我想我会展示如何使用JavaScript与CSS Custom Property交互来控制各种元素的速度。我只是在演戏，真的，但它可能是有用的

const d = document;
const w = window;

const display=()=>{
  console.clear();
  console.log('speed:%s',w.getComputedStyle( d.documentElement ).getPropertyValue('--s'))
};
const clickhandler=()=>{
  let s=parseFloat(w.getComputedStyle( d.documentElement ).getPropertyValue('--s') );
      s-=250;
  if( s > 0 ) d.documentElement.style.setProperty('--s',`${s}ms`);
  display();
};
const changehandler=(e)=>{
  let s=e.target.value;
  if( s > 0 ) d.documentElement.style.setProperty('--s',`${s}ms`);
  display();
};


d.querySelector('.loading').addEventListener('click',clickhandler);
d.querySelector('[type="range"]').addEventListener('change',changehandler);
:root{
  /*
    a CSS variable / custom property
    is a great way to apply control
    to the css via Javascript.
    
    A simple variable --s is used for the
    speed, 2000ms = 2s.
  */
  --s: 2000ms;
}
[type='range']{
  width:calc(100% - 2rem);
  height:2px;
  outline: none;
  -webkit-appearance: none;
  margin:2rem 1rem 0 1rem;
  background:yellow;
  cursor:pointer;
  box-shadow: 0 0 20px #fff000;
}
[type='range']::-webkit-slider-thumb{
  width: 2rem;
  -webkit-appearance: none;
  height: 1rem;
  background: #ffff00;
  border-radius: 1rem;
  border:15px ridge gold;
  box-shadow: 0 0 20px #fff000, 0px 0px 72px 3px rgba(129,214,32,1);
  
}


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: animateA var(--s) linear infinite forwards;
}
span {
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  width: 50%;
  height: 4px;
  background: transparent;
  transform-origin: left;
  animation: animateB var(--s) linear infinite forwards;
}
span:before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff000;
  top: -6px;
  right: -8px;
  box-shadow: 0 0 20px #fff000;
}
/* #a.loading:before */
@keyframes animateA {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* span#b */
@keyframes animateB {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}
<div class="loading" id='a'>Loading<span id='b'></span></div>
<input type='range' min=100 max=4000 step=50 value=2000>
赞(0）分享  回复(0）举报  8个月前
7cjasjjr

7cjasjjr2#

是的，这是可能的-CSS animation属性是多个属性的缩写，其中animation-duration设置速度。
通过将b元素的style.animationDuration值设置为较小的值，可以实现所需结果的一半：

function fast() {
  document.getElementById("a")
   .style.animation = "animate ys linear infinite";
  document.getElementById("b")
    .style.animationDuration = 500ms; // this works
}

坏消息是：更新“a”元素上的animation duration style属性根本不起作用，可能是因为带有透明边框象限的伪元素是animated元素，而不是.loading元素本身。不管是什么原因，它在Firefox或Edge（我用于测试的webkit浏览器）中都不起作用。
查看.loading元素的动画代码让我意识到，我个人会从头开始，从下往上工作-比如说一个具有相对定位的动画元素，一个子元素或伪元素，其彩色圆圈相对于边界定位，放置在一个包含“加载”消息的非动画元素的顶部，并进一步将该集合放置在页面上。如果你更喜欢尝试修改发布的代码来工作，更多的权力给你！：-）

赞(0）分享  回复(0）举报  8个月前
nbnkbykc

nbnkbykc3#

是的，您使用字符串设置animation属性的值，因此只需构建包含变量值的字符串即可。

var y = 0.1;

function fast() {
  document.getElementById("a").style.animation = `animateC ${y}s linear infinite`;
  document.getElementById("b").style.animation = `animate ${y}s 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);
  }
}
<div class="loading" id="a" onclick="fast()">
  Loading
  <span id="b"></span>
</div>
赞(0）分享  回复(0）举报  8个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com