web前端运用CSS动画实现图像的幻灯片自动播放切换效果

最新推荐文章于 2024-07-22 11:15:00 发布

廖瑞姬

最新推荐文章于 2024-07-22 11:15:00 发布

阅读量3.6k

点赞数 3

分类专栏： web前端文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44790790/article/details/106042505

版权

先看一下浏览器运行结果：

一、

最初用”background-image”背景图片属性定义动画，结果幻灯片切换时没有上下滑动的效果。
仅用到HTML和CSS，未用javascript。

二、代码：
HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="image/01.jpg" alt=""></li>
        <li><img src="image/02.jpg" alt=""></li>
        <li><img src="image/03.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

CSS:

*{
   
    padding: 0;
    margin: 0;
}
.box{
   
    display: block;
    width: 800px;
    height: 360px;
    overflow: hidden;
}
ul{
   
    position: relative;
    top: -720px;
    display: block;
    width: 800px;
    height: 1080px;
    animation:myp 10s infinite linear;
}