用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 ...
随机推荐
- [转帖]APT34攻击全本分析
APT34攻击全本分析 https://zhuanlan.kanxue.com/article-8401.htm 高手太多 我等菜鸟目不暇接.. 一.事件综述 2019年4月18日,黑客/黑客组织使用 ...
- uva-796.critical links(连通图的桥)
本题大意:求出一个无向图的桥的个数并且按照顺序输出所有桥. 本题思路:注意判重就行了,就是一个桥的裸题. 判重思路目前知道的有两种,第一种是哈希判重,第二种和邻接矩阵的优化一样,就是只存图的上半角或者 ...
- 码云与Git的使用
码云注册和使用 网址:https://gitee.com 注册之后新建一个仓库 接下来安装Git 协同开发Git安装与使用 下载地址:https://gitforwindows.org 安装完成之后选 ...
- P1397 [NOI2013]矩阵游戏（递推）
P1397 [NOI2013]矩阵游戏 一波化式子,$f[1][m]=a^{m-1}+b\sum_{i=0}^{m-2}a^i$,用快速幂+逆元求等比数列可以做到$logm$ 设$v=a^{m-1}, ...
- OD消息断点
[文章作者]: icefisher[作者邮箱]: 181712814@qq.com[软件下载]: [软件名称]: echap518.exe(只是供学习的crackme)[加壳方式]: 里面直接有个un ...
- Git 使用疑问
1) fatal: remote origin already exists. 解决办法 ..$ git remote add origin git@git.*.com:tang/comment_s ...
- 使用 ELK 来分析你的支付宝账单
ELK 即 elasticsearch, logstash 以及 kibana.Elasticsearch 是一个基于 lucene 的分布式搜索引擎,logstash 是一种日志传输工具,也可以对日 ...
- DRF框架之视图类
前后端分离的项目 >: pip3 install djangorestframework 一.视图类传递参数给序列化类 视图层:views.py 需求: (1)在视图类中实列化对象是,可以设 ...
- 对于springmvc 很奇妙的报404错误的记录
@RequestMapping("/editItems") public ModelAndView editItems(Integer id) throws Exception { ...
- 特殊权限位：suid、sgid、sticky
linux系统特殊权限位 suid.sgid.stickysuid 使任意用户获得用文件属主相同的权限,sgid使用户获得与文件属组相同的权限(通过sgid获得的权限等同于同一用户组的权限) 表示方法 ...