使用css3的动画制作一个简易的轮播图

吴爃

已于 2022-11-16 16:12:48 修改

阅读量444

点赞数

分类专栏：前端文章标签： css3 动画前端

于 2022-02-27 19:59:25 首次发布

本文链接：https://blog.csdn.net/qq_59369367/article/details/123169085

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端页面中的轮播图制作方法有很多种,之前都是用js来写,这次学到了css3动画,发现了用css实现的更加简单的办法,来制作一个轮播图,原理则是采用css3动画作为主要载体,主要是移动盒子的浮动尺寸,来达到移动效果.

<!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>3d</title>
    <style>
#parn{

    width: 1000px ;
    height: 500px;
    overflow: hidden; 
    /* 将超出范围的元素隐藏起来,这样每次就只显示一个与盒子大小相等的元素 */
}
#son{
    width: 2000px; 
    /* 子盒子中放的大小是与父盒子的倍数关系 */

    animation: myname 10s 10;
    /* 后面的参数:设置的动画名称 时长 播放次数 */

}
#son>img{
    float: left;
    width: 1000px;
    height: 500px;
}
@keyframes myname {
    50% {margin-left: -1000px;}
  /* 这里我只放了2张图片,所以,只要做50%做一次动作即可 */

}
    </style>
</head>
<body>
    <div id="parn">
<div id="son">
   
    <img src="./1.jpg" alt="">
    <img src=".//R-C.jpg" alt="">
</div>


    </div>



</body>
</html>

吴爃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用css3的动画制作一个简易的轮播图

前端页面中的轮播图制作方法有很多种,之前都是用js来写,这次学到了css3动画,发现了用css实现的更加简单的办法,来制作一个轮播图,原理测试采用css3动画作为主要载体,主要是运行移动盒子的浮动尺寸,来达到移动效果.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
复制链接

扫一扫