css实现走马灯效果

可以使用css实现简单的走马灯效果如下图

首先定义html部分使用 .box>li>a的结构.注意:由于后面显示会出现空白,需要把前三个图片加在后面,形成闭环实现一直轮播的效果.

    <div class="box"><ul><li><a href="#"><img src="../images/images/1.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/2.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/3.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/4.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/5.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/6.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/7.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/1.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/2.jpg" alt=""></a></li><li><a href="#"><img src="../images/images/3.jpg" alt=""></a></li></ul></div>

设置盒子边框,使用父相子绝定位居中.同时设置图片大小使其在box框内一行显示并设置溢出隐藏

        .box {/*父相子绝定位居中*/position: absolute;top: 0px;left: 0px;bottom: 0px;right: 0px;margin: auto;width: 600px;height: 150px;border: 3px solid black;overflow: hidden;}.box ul li {float: left;height: 150px;width: 200px;}.box ul li img {height: 150px;width: 200px;}.box ul {list-style: none;height: 150px;width: 2000px;}

设置整个ul向左移动的动画效果并让ul调用

        .box ul {list-style: none;height: 150px;width: 2000px;animation: move 5s linear infinite;}@keyframes move {100% {
/*设置为1400是因为7张照片为一个周期,最后会有三张留白,需要再次加入前三张图片*/transform: translate(-1400px);}}

大功告成!

css实现走马灯效果相关推荐

html纵向的跑马灯效果,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
html语言怎么做到走马灯,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
Jquery 图片走马灯效果原理
本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解照例先上代码: HTML: <div class="box"> & ...
css动画走马灯5秒,css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
jquery 立体走马灯_Jquery 图片走马灯效果原理
本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解照例先上代码: HTML: 在中,再包含了一个div,且设置了一个很比较大的宽度,是为了解决一个 ...
vue css实现走马灯(轮播)组件，websocket推送数据
需求背景:数据统计常需要实现内容定向移动的走马灯效果,便于用户实时观察数据变动. 目标:实现一个vue组件,可以上下左右实现走马灯效果,且走马灯元素可自定义. 技术选型比较常用的方式是如下几种 j ...
前端小练习——走马灯效果+网页页面换肤效果
一.需要掌握的知识? 二.思路阐述及代码运行结果一.需要掌握的知识 html的background 无序列表盒子模型浮动 css动画伪类一些css常用文本格式理解 javascript怎 ...
html跑马灯 ie6,jQuery实现 “老汉推车”走马灯效果
1. html 代码结构这里展示的是:"老汉推车"走马灯效果名字不错吧最新"噗-":"拉灯"死了,我再也不相信爱情鸟- « » 我是搜 ...

css实现走马灯效果

css实现走马灯效果相关推荐

最新文章

热门文章