会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133730个问题
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 226楼

老师,在写小米商城官网的页脚时遇到一个问题。官网在这一部分有一个两张图片交替闪烁的效果,两张图片瞬间交换只显示一个,我用动画来写会有淡入淡出的效果,请问这个该怎么实现瞬间的交替呢?

QQ图片20220910221157(1).png

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .bot-img {

            width: 600px;

            height: 100px;

            border: 1px solid red;

            text-align: left;

            position: relative;

        }


        .bot-img p {

            width: 92px;

            height: 28px;

            margin-left: 0;

            float: left;

            margin-left: 20px;

        }


        .bot-p {

            background-color: blue;

        }


        .imgs,.imge {

            position: absolute;

            top: 0;

            left: 354px;

            background-color: red;

        }


        .imge {

            animation: change 3s infinite;

            background-color: greenyellow;

        }


        @keyframes change {

            0% {

                opacity: 0;


            }


            50% {

                opacity: 1;

            }


            100% {

                opacity: 0;

            }

        }

    </style>

</head>


<body>

    <div class="bot-img">

        <a href="#">

            <p class="bot-p"></p>

        </a>

        <a href="#">

            <p class="bot-p"></p>

        </a>

        <a href="#">

            <p class="bot-p"></p>

        </a>

        <a href="#">

            <p class="imgs"></p>

            <p class="imge"></p>

        </a>

    </div>

</body>


</html>


WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 227楼

小米官网项目.zip

为什么加了z-index,“下载APP”和“购物车”里面的弹窗依旧被遮挡住

WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 228楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/前端入门与基础知识 229楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 235楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS盒子模型 238楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 240楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637