Question

我为我的网站制作了一个动画徽标，但它不起作用：/

动画在Waterfox和IE中无法正常运行，而在Chrome中它是错误的。将鼠标悬停在图像上并停止动画后图像消失。

我的HTML代码：

<!doctype html>
<html>
    <head>
        <title>
        Blender4Me
        </title>

        <link type="text/css" rel="stylesheet" href="logo.css"/>

    </head>

    <body id="header">
        <!-- Mittleres Feld -->
        <div class="mid">
            <a href="#" > <img class="logo" src="inner_outer_circle.gif"/> </a>
            <a href="#" class="rotate"> <img class="logo" src="mid_circle.gif"/> </a>
        </div>
    </body>
</html>

我的css代码：

#header
{
    margin: 0 0 0 0;
    background: #222222 none;
}

.rotate{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}  

.rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

.logo{
    position: absolute;
    width: 1024px;
    height: 1024px;
}

div{
    position: absolute;
    width: 1024px;
    height: 1024px;
    border: 20px solid #FFFFFF;
}

也许您已了解发生了什么，并知道如何使用不同的浏览器解决问题：3

HTML / CSS图像在动画后消失

0 个答案: