用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 ...
随机推荐
- kafka消费者脚本无法启动问题
console-consumer can't rebalance after 4 retries 解决方案:kafka0.9版本换成1.0版本 究竟是怎么回事我也不知道
- librdkafka 安装
1,Git clone git clone https://github.com/edenhill/librdkafka.git 2,cd librdkafka/ 3,./configure 4,ma ...
- 第五周课程总结&试验报告（三
实验三 String类的应用 实验目的 掌握类String类的使用: 学会使用JDK帮助文档: 实验内容 1.已知字符串:"this is a test of java".按要求执 ...
- Maven 中 resources 作用
默认情况下,如果没有指定resources,目前认为自动会将src/main/resources下的.xml文件放到target里头的classes文件夹下的package下的文件夹里.如果设定了re ...
- [转帖]CBO和RBO
http://www.itpub.net/thread-263395-1-1.html 参数不能随便改啊.. optimizer_features_enable('8.1.7') ORACLE 提供了 ...
- JSP总结（jsp/EL表达式/核心标签）
1.概念 jsp,即java Server Pages,java服务器页面. 2.简单介绍 小示例 <%@ page language="java" contentType= ...
- centos7安装最新稳定版nginx
开始安装 yum 安装 nginx yum安装nginx文档地址 # 一切以最新的文档页面为准--搜centos http://nginx.org/en/linux_packages.html yum ...
- D-多连块拼图
多连块是指由多个等大正方形边与边连接而成的平面连通图形. – 维基百科 给一个大多连块和小多连块,你的任务是判断大多连块是否可以由两个这样的小多连块拼成.小多连块只能平移,不能旋转或者翻转.两个小多连 ...
- eclipse调试openstack的nova代码
前段时间一直在研究openstack的nova部分的代码.特别想知道,怎样用eclipse来调试代码.也在论坛上问了别人.无果.最后还是自己摸索出了出路. 以下写出自己探索之路.我是用devstack ...
- 如何将DataTable转换成List<T>
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...