html - CSS 动画在 Internet Explorer 中不起作用-6ren

html - CSS 动画在 Internet Explorer 中不起作用

转载作者：太空宇宙更新时间：2023-11-03 19:30:57

我有一个 HTML/CSS 网页。本页面背景图片不断变化。它在 Chrome 中有效，但在 Internet Explorer 中无效——背景图像保持不变。我想指出的是，它不会为您正确显示，因为不包括图像。

HTML/CSS:

<!doctype html>
<html>
<title>Macht IT Solutions</title>
<head>
    <style>
        #body1 {
            position: relative;
            background-Color: white;
            font-color: white;
            width: 1000px;
            margin: 0 auto;
            z-index: -1;
        }

        #body2 {

            position: absolute;
            top: 140px;
            font-color: white;
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            z-index: 0;
        }

        #background {
            opacity: 0.8;
            position: absolute;
            top: 0px;
            background-image: url("back.jpg");
            font-color: white;
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            z-index: 1;
            -webkit-animation-name: bodyback;
            -webkit-animation-duration: 30s;
            -webkit-animation-iteration-count: infinite;
            animation-name: bodyback;
            animation-duration: 30s;
            animation-delay: 5s;
            -webkit-animation-delay: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
        }

        #logo {
            border: 1px solid black;
            background-color: black;
            color: white;
            padding: 5px;
            border-radius: 5px 0px 5px 0px;
            background-image: url("networking.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 130px;
        }

        #about {
            position: absolute;
            top: 10px;
            color: black;
            border: 1px solid blue;
            background-color: white;
            border-radius: 5px 0px 5px 5px;
            padding: 4px;
            width: 500px;
            z-index: 2;
        }

        #aboutmetext {
            position: absolute;
            top: 100px;
            background-color: white;
            color: black;
            float: left;
            width: 500px;
            border: 1px solid blue;
            padding: 4px;
            border-radius: 5px 30px 20px 20px;
            z-index: 2;
        }

        #video {
            position: absolute;
            top: 30px;
            left: 550px;
            border: 1px solid blue;
            background-color: white;
            float: right;
            overflow: hidden;
            border-radius: 10px 10px 0px 0px;
            height: 360px;
            z-index: 2;
        }

        #serv {
            position: absolute;
            top: 400px;
            float: left;
            width: 500px;
            border: 1px solid blue;
            padding: 4px;
            border-radius: 5px 30px 20px 20px;
            color: black;
            background-color: white;
            z-index: 2;
        }

        #services {
            position: absolute;
            top: 300px;
            font-color: black;
            float: left;
            height: 30px;
            border: 1px solid blue;
            padding: 4px;
            background-color: white;
            border-radius: 5px 0px 5px 0px;
            color: black;
            width: 500px;
            z-index: 2;
        }

        #contactus {
            position: absolute;
            top: 550px;
            float: left;
            height: 30px;
            border: 1px solid blue;
            padding: 4px;
            background-color: white;
            border-radius: 5px 0px 5px 0px;
            color: black;
            z-index: 2;
        }

        #contact {
            position: absolute;
            top: 650px;
            float: left;
            width: 500px;
            border: 1px solid blue;
            padding: 4px;
            border-radius: 5px 30px 20px 20px;
            color: black;
            background-color: white;
            z-index: 2;
        }

        @KeyFrames bodyback {
            0% {
                background-image: url("back.jpg");
            }
            25% {
                background-image: url("net1.jpg");
            }
            50% {
                background-image: url("net2.jpg");
            }
            100% {
                background-image: url("net3.jpg");
            }
        }

        @-webkit-keyframes bodyback {
            0% {
                background-image: url("back.jpg");
            }
            25% {
                background-image: url("net1.jpg");
            }
            50% {
                background-image: url("net2.jpg");
            }
            100% {
                background-image: url("net3.jpg");
            }
        }

        @KeyFrames {
        }

        @KeyFrames {
        }

        @KeyFrames {
        }
    </style>
</head>
<body id="body1">
<div id="logo" style="font-size:30px">
    <img src="machtlogo1.png" height="100" width="100"> Macht IT Solutions
</div>
<div id="body2">
    <div id="background"></div>
    <h1 id="about">About us</h1>

    <div>
        <p id="aboutmetext">
            <font>
            </font>
        </p>

        <div id="video">
            <p align="center">
                <font color="black">
                    <b>
                        What is the Internet?
                    </b>
                </font>
            </p>
            <iframe width="420" height="315" src="https://www.youtube.com/embed/Jj6EHgSsx_U?autoplay=0">
            </iframe>
        </div>
    </div>
    <div>
        <h1 id="services"><font color="black">Services</font></h1>
    </div>
    <div id="serv">
        <p>
            <font color="black">
                inquiry.
            </font>
        </p>
    </div>
    <div>
        <h1 id="contactus"><font color="black">Contact us</font></h1>
    </div>
    <div id="contact">
        <p>
            <font color="black">
            </font>
        </p>
    </div>
</div>
</body>
</html>

最佳答案

根据CSS Transitions，background-image 属性不可设置动画。规范。

在撰写本文时，您不应该期望它能在任何浏览器中运行。这在未来可能会改变，但随着对实现进行试验，并且标准机构继续推进对新功能和创造性功能的支持。

如果您想在此期间换掉背景图片，您应该使用脚本，或者通过在单个元素上设置单个背景图片的位置/大小的动画，而不是尝试设置背景本身的动画。

关于html - CSS 动画在 Internet Explorer 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30380672/

文章推荐： html - 下拉导航菜单

居中问题

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS 动画在 Internet Explorer 中不起作用