用CSS代码编写简易轮播图
废话不多说，直接上代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 1000px;
height: 500px;
margin: 50px auto;
overflow: hidden;
background: skyblue;
}
.flex{
display: flex;
}
.item-box{
animation: my-css 5s infinite;
-webkit-animation: my-css 5s infinite;
-o-animation: my-css 5s infinite;
-moz-animation: my-css 5s infinite;
animation-direction: alternate;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
-moz-animation-direction: alternate;
}
.item-box:hover{
animation-play-state: paused;
-webkit-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
}
.item-box div{
width: 1000px;
height: 450px;
flex-shrink: 0;
}
.item1{
background: pink;
}
.item2{
background: brown;
}
.item3{
background: red;
}
.item4{
background: yellow;
}
.item5{
background: green;
}
@keyframes my-css{
0% {
transform: translate(0%);
}
25% {
transform: translate(-100%);
}
50% {
transform: translate(-200%);
}
75% {
transform: translate(-300%);
}
100% {
transform: translate(-400%);
}
}
@-webkit-keyframes my-css{
0% {
transform: translate(0%);
}
25% {
transform: translate(-100%);
}
50% {
transform: translate(-200%);
}
75% {
transform: translate(-300%);
}
100% {
transform: translate(-400%);
}
}
@-o-keyframes my-css{
0% {
transform: translate(0%);
}
25% {
transform: translate(-100%);
}
50% {
transform: translate(-200%);
}
75% {
transform: translate(-300%);
}
100% {
transform: translate(-400%);
}
}
@-moz-keyframes my-css{
0% {
transform: translate(0%);
}
25% {
transform: translate(-100%);
}
50% {
transform: translate(-200%);
}
75% {
transform: translate(-300%);
}
100% {
transform: translate(-400%);
}
}
.ico-box{
width: 30%;
height: 30px;
justify-content: space-around;
align-items: center;
margin: 10px auto;
}
.ico-box div{
height: 10px;
width: 20px;
border-radius: 10px;
background: #fff;
transition: width 0.5s;
}
.ico-box div:hover{
width: 40px;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="item-box flex">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
</div>
<div class="ico-box flex">
<div class="ico"></div>
<div class="ico"></div>
<div class="ico"></div>
<div class="ico"></div>
<div class="ico"></div>
</div>
</div>
</body>
</html>
用CSS代码编写简易轮播图的更多相关文章
- 原生js一行代码实现简易轮播图
这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- html+css+javascript实现简易轮播图片
html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...
- vue简易轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery简易轮播图
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 简易轮播图、内含定时器。熟练JS操作
HTML部分: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF ...
随机推荐
- Jmeter响应数据显示乱码问题
Jmeter在访问接口的时候,响应内容如果有中文可能会显示乱码,原因应该是响应页面没有做编码处理,jmeter默认按照ISO-8859-1编码格式进行解析. 解决步骤: 现象:jmeter访问本地文件 ...
- python深度学习培训概念整理
对于公司组织的人工智能学习,每周日一天课程共计五周,已经上了三次,一天课程下来讲了两本书的知识.发现老师讲的速度太快,深度不够,而且其他公司学员有的没有接触过python知识,所以有必要自己花时间多看 ...
- [转帖]100G QSFP28与CFP,CFP2,CFP4光模块的比较
100G QSFP28与CFP,CFP2,CFP4光模块的比较 https://www.eefocus.com/etulink/blog/17-09/423967_5c520.html 数据中心网络发 ...
- linux之网卡绑定
1 什么是网卡绑定 将多块网卡绑定同一IP地址对外提供服务,可以实现高可用或者负载均衡.直接给两块网卡设置同一IP地址是不可以的.通过bonding,虚拟一块网卡对外提供连接,物理网卡的被修改为相同的 ...
- dfs(最佳路径)
http://acm.hdu.edu.cn/showproblem.php?pid=1242 Rescue Time Limit: 2000/1000 MS (Java/Others) Memo ...
- [luogu5339] [TJOI2019]唱、跳、rap和篮球(容斥原理+组合数学)(不用NTT)
[luogu5339] [TJOI2019]唱.跳.rap和篮球(容斥原理+组合数学)(不用NTT) 题面 略 分析 首先考虑容斥,求出有i堆人讨论的方案. 可以用捆绑法,把每堆4个人捆绑成一组,其他 ...
- C#.NET、Power BI、数据挖掘
阅读目录 1.采集目目标特点与分析 2.方案第一版-Low到爆,别笑话 3.碰壁后的第二版方案 4.最终方案第三版 5.总结 说起采集,其实我是个外行,以前拔过阿里巴巴的客户数据,在我博客的文章:C# ...
- 常用的前端框架Angular、React、Vue
VUE 一.vue导读 1.1 vue的优点:结合其他框架点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式,组件化开发,单页面应用 1.2 vue环境的导入: 本地导入 <!--方法 ...
- Nginx中配置https中引用http的问题
Nginx中配置https中引用http的问题 遇到问题: 今天公司要在后台增加直播入口,使用腾讯云的实时音视频,要求是必须使用https,在配置完强制跳转https候,发现后台无法上传图片,在浏览器 ...
- 基于双XCKU060+双C6678 的双FMC接口40G光纤传输加速计算卡381
一.板卡概述 板卡采用基于双FPGA+双DSP的信号采集综合处理硬件平台,板卡大小360mmx217mm.板卡两片FPGA提供两个FMC接口,4路QSFP+接口:每片FPGA挂接2簇32-bit DD ...