gpt4 book ai didi

html - 为什么我的第二张图片没有移动或动画

转载 作者:行者123 更新时间:2023-11-28 16:56:41 26 4
gpt4 key购买 nike

我正在尝试制作 2 张图片的动画:1.从左下角到右上角。其他从右下到左上。图片 1 在移动,而另一个没有...

一张图片在动(从左下到右上的图片),另一张还不动当我在 saprate html filr 中运行静止图像的代码时,它运行良好......

<style>
html
{
height:100%
}
body
{
height: 100%;
width:100%;
margin: 0;
background-repeat: no-repeat;
/* background-attachment: fixed;*/
background-image: radial-gradient(black,white);
}
div.move_to_right
{
width: auto;
height: auto;
position: absolute;
left:200px;
/*background-color: black;*/
/* background-image: url('/f16.png');*/

}
.move_to_right{
position: absolute;
left:200px;
}
#move_to_right
{
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count:infinite;
}
.ptag
{
color:white;
}

/* Safari 4.0 - 8.0 */
/* Standard syntax */
@keyframes example {
0%{
opacity: 0.5;
transform: translate(-200px,150px);
}
100%{
opacity: 1;
transform: translate(0px,0px);
}
div.move_to_left
{
width: auto;
height: auto;
position: absolute;
left:200px;
/*background-color: black;*/
/* background-image: url('/f16.png');*/

}
.move_to_left{
position: absolute;
right:200px;
}
#move_to_left
{
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 3s;
animation-iteration-count:infinite;
}
.ptag
{
color:white;
}

/* Safari 4.0 - 8.0 */
/* Standard syntax */
@keyframes example {
0%{
opacity: 0.5;
transform: translate(200px,150px);
}
100%{
opacity: 1;
transform: translate(0px,0px);
}
</style>
<html><body>
<div class="move_to_right">
<!--<img id="move" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">-->
<img id="move_to_right" src="f16.png" style="width:150px; height:150px;">
</div>
<div class="move_to_left">
<!--<img id="move" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">-->
<img id="move_to_left" src="f162.png" style="width:150px; height:150px;">
</div>
</body></html>

最佳答案

一些问题:

  • 你没有关闭@keyframes左大括号
  • 你的两个关键帧都有相同的名称 examples

html {
height: 100%
}

body {
height: 100%;
width: 100%;
margin: 0;
background-repeat: no-repeat;
background-image: radial-gradient(black, white);
}

div.move_to_right {
width: auto;
height: auto;
position: absolute;
left: 200px;
}

.move_to_right {
position: absolute;
left: 200px;
}

#move_to_right {
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: move_to_right;
-webkit-animation-duration: 10s;
animation-name: move_to_right;
animation-duration: 3s;
animation-iteration-count: infinite;
}

@keyframes move_to_right {
0% {
opacity: 0.5;
transform: translate(-200px, 150px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}

div.move_to_left {
width: auto;
height: auto;
position: absolute;
left: 200px;
}

.move_to_left {
position: absolute;
right: 200px;
}

#move_to_left {
width: 150px;
height: 150px;
position: relative;
-webkit-animation-name: move_to_left;
-webkit-animation-duration: 10s;
animation-name: move_to_left;
animation-duration: 3s;
animation-iteration-count: infinite;
}

@keyframes move_to_left {
0% {
opacity: 0.5;
transform: translate(200px, 150px);
}
100% {
opacity: 1;
transform: translate(0px, 0px);
}
}
<div class="move_to_right">
<img id="move_to_right" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">
</div>
<div class="move_to_left">
<img id="move_to_left" src="https://pngimage.net/wp-content/uploads/2018/05/f16-png-6.png" style="width:150px; height:150px;">
</div>

关于html - 为什么我的第二张图片没有移动或动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56360398/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com