Question

我想让两张图像在它们之间平滑淡出。

图像显示在浏览器上，但动画不起作用。

我认为这个问题与@keyframes或＃cf3 img.top部分有关......其他部分似乎都有效..在Chrome上测试。

public class AudioManagerScript : MonoBehaviour
{
public Transform point1;
public Transform point2;
public Transform point3;
public Transform point4;
public Transform point5;
public Transform point6;
public Transform point7;
public Transform point8;
// Use this for initialization
public AudioClip clip1;
public AudioClip clip2;
public AudioClip clip3;
public AudioClip clip4;
public AudioClip clip5;
public AudioClip clip6;
public AudioClip clip7;
public AudioClip clip8;
public AudioClip clip9;
public AudioClip clip10;

public AudioSource audio;

void Start()
{
    InvokeRepeating("myFunc", 1.0f, 1.0f);
    audio = GetComponent<AudioSource>();
}

void myFunc()
{
    audio.PlayClipAtPoint(clip1,point1.transform.position,0.9f);
}

}

style.css，这是衰落动画所在的位置：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div id="cf">
            <img class="bottom" src="assets/1.png" />
            <img class="top" src="assets/2.png" />
        </div>
    </body>
</html>

Answer 1

您的代码很好，您选择了错误的ID。

您的代码：

#cf3 img.top {

应该是

#cf img.top {

关键帧可以在选择器的上方或下方都可以使用。

Example

CSS关键帧图像fadeInOut拒绝动画

1 个答案: