用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 ...

随机推荐

七、Zabbix-模板，应用集，监控项，触发器
本篇内容,将模板,应用集,监控项,触发器放在一起,因为我们建立使用的监控项和触发器,大多数都是对多台机器使用的,很少有一个监控项对应一个主机的情况. 一.模板 1.什么是模板? 个人理解,模板就是模板 ...
java8--- （Function、Predicate、Consumer）通用函数式接口
// public static void main(String[] args) throws InterruptedException { // https://blog.csdn.net/u01 ...
CentOS7使用集群同步脚本对配置文件同步分发
1.介绍使用集群同步脚本对配置文件同步分发 2.操作 1)在/root目录下创建bin目录,并在bin目录下创建文件xsync,文件内容如下: [root@hadoop101 ~]$ mkdir b ...
高级BASH
Bash介绍与入门 1,简介 Bash(GNU Bourne-Again Shell)是一个为GNU计划编写的Unix shell,它是许多Linux平台默认使用的shell shell是一个命令解释 ...
HDU4471 Homework
题目预处理转移矩阵的$2^k$. 然后把关键点按下标排序. 每次用类似于矩阵快速幂的方法求出两个关键点中间的转移矩阵. #include<bits/stdc++.h> using n ...
PHP排序函数sort、rsort、asort、arsort、ksort、krsort
1.sort函数用于对数组元素值从低到高排序,去除原始索引元素,重新生成0,1,2..的键2.rsort函数用于对数组元素值从高到低排序,去除原始索引元素,重新生成0,1,2..的键3.asort函数 ...
Python 入门之 Python三大器之迭代器
Python 入门之 Python三大器之迭代器 1.迭代器 (1)可迭代对象: <1> 只要具有__ iter __()方法就是一个可迭代对象 (我们可以通过dir()方法去判断一个 ...
sublime3跳转函数
点击Preferences->Browse Packages进入Packages目录,然后打开User目录,查看User目录里面有没有Default (Windows).sublime-mous ...
ES6中class的实现原理
一.在ES6以前实现类和继承实现类的代码如下: function Person(name, age) { this.name = name; this.age = age; } Person.pro ...
js中的函数防抖与节流
一.滚动条监听的例子写一个功能需求-- 监听浏览器滚动事件,返回当前滚条与顶部的距离,代码如下: function showTop () { var scrollTop = document.bod ...

用CSS代码编写简易轮播图

用CSS代码编写简易轮播图的更多相关文章

随机推荐

热门专题