时间戳

首页 > 解决方案 > 来自javascript的attr（）变量的CSS动画错误

css - 来自javascript的attr（）变量的CSS动画错误

问题描述

我正在尝试制作一个 css 动画并拥有 3 个文件。这是html文件

<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" class = "tag" href="../css/style.css">
</head>
<body>
    <script type="text/javascript" src="main.js"></script>
    <!-- header => class => id => inline style-->
    <div class="main-content">
        <h2>HELLO WORLD</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut 
vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor.
Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat 
faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc. 
Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis. 
Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus, 
non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus
        </p>
    </div>
    <div id="bounceLeft"></div>
</body>
</html>

然后这里是javascript文件...

setInterval(()=>{
    document.getElementsByClassName("main-content")[0].setAttribute("width", window.innerWidth);
    document.getElementsByClassName("main-content")[0].setAttribute("height", window.innerHeight);}
, 1000);

这是css文件。

@keyframes colChange{
    0% {background-color: red;}
    33% {background-color: rgb(0, 38, 255);}
    66% {background-color:  rgb(20, 192, 72);}
    100% {background-color: red}
}

@keyframes bounceLeft{
    0%{left: calc(attr(data-width)/2-230); top:0px;}
    50%{left: calc(attr(data-width)/2-200); top:attr(data-height);}
    100%{left: calc(attr(data-width)/2-200); top:0px;}
}

.main-content{
    height: 300px;
    width: 400px;
    margin: 0 auto;
    background: linear-gradient(360deg, rgba(255,0,0,0.5), rgba(255,0,0,0));
    outline-width: 7px;
    outline-color: yellow;
    outline-style: outset;
    
}

.main-content{
    height:auto;
}

#bounceLeft{
    position: relative;
    width: 25px;
    height: 25px;
    border: solid white;
    animation-name: bounceLeft;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

div :hover{
    outline-style: dashed;
} 

body{
    animation-iteration-count: infinite;
    animation-name: colChange;
    animation-duration: 10s;
}

p{
    text-align: center;
    color: rgb(214, 161, 16);
}
h2{
    text-align: center;
}

这样做的问题是 div 根本没有移动。当我检查它时，我意识到 css 中的 attr() 部分不起作用，但我不知道如何修复它。我想制作一个动画，让 div 在屏幕上上下弹跳，在占位符文本旁边。这是错误的假设错误图片

编辑：我希望白盒上下弹跳

标签： cssanimation

解决方案

setInterval(function(){  
   document.getElementsByClassName("main-content")[0].style.width = window.innerWidth + "px";
   document.getElementsByClassName("main-content")[0].style.height = window.innerHeight + "px";
}, 1000);
 var m = 200;
@keyframes colChange{
    0% {background-color: red;}
    33% {background-color: rgb(0, 38, 255);}
    66% {background-color:  rgb(20, 192, 72);}
    100% {background-color: red}
}

@keyframes bounceLeft{
    0%{left: calc(attr(data-width)/2-230); top:0px;}
    50%{left: calc(attr(data-width)/2-200); top:attr(data-height);}
    100%{left: calc(attr(data-width)/2-200); top:0px;}
}

.main-content{
    height: 300px;
    width: 400px;
    margin: 0 auto;
    background: linear-gradient(360deg, rgba(255,0,0,0.5), rgba(255,0,0,0));
    outline-width: 7px;
    outline-color: yellow;
    outline-style: outset;
    
}

.main-content{
    height:auto;
    transition: all 2s;
}

#bounceLeft{
    position: relative;
    width: 25px;
    height: 25px;
    border: solid white;
    animation-name: bounceLeft;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

div :hover{
    outline-style: dashed;
} 

body{
    animation-iteration-count: infinite;
    animation-name: colChange;
    animation-duration: 10s;
    
}

p{
    text-align: center;
    color: rgb(214, 161, 16);
}
h2{
    text-align: center;
}
<div class="main-content">
        <h2>HELLO WORLD</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut 
vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor.
Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat 
faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc. 
Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis. 
Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus, 
non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus
        </p>
    </div>
    <div id="bounceLeft"></div>

推荐阅读