用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 ...
随机推荐
- 100+ Python挑战性编程练习（2）
熟能生巧,多撸代码多读书 https://github.com/zhiwehu/Python-programming-exercises/blob/master/100+%20Python%20cha ...
- Win10使用自带功能创建系统映像备份时D盘被包含进去问题的解决
在使用Windows10系统时,使用Windows自带功能创建系统映像备份文件时碰到了一些问题,所以在此记录一下. 创建系统映像文件的步骤,如下: 1.打开 控制面板 -> 选择 系统和安全 - ...
- spring扩展点之PropertyPlaceholderConfigurer
原理机制讲解 https://leokongwq.github.io/2016/12/28/spring-PropertyPlaceholderConfigurer.html 使用时多个配置讲解 ht ...
- 【嵌入式 Linux文件系统】如何使用Initramfs文件系统
(1)#cd ../rootfs/ #ln -s ./bin/busybox init 创建软链接 (2)进入Linux内核 #make menuconfig General setup-->I ...
- 关于golang的label
1 label所在的代码段在没有跳转的时候按照所在的位置按顺序执行 2 break label和continue label可以一次性从多重循环中跳出 3 goto label的用法和c/c++中的一 ...
- [七月挑选]优化hexo目录，使本地图片能显示出来
title: 优化hexo目录,使本地图片能显示出来 查看了一下从此蜕变作者的Hexo中添加本地图片,提炼了一些能优化本地图片存放及编写是图片查看的问题. 1.修改配置文件_config.yml 里的 ...
- Linux系统性能测试工具（五）——磁盘io性能工具之fio
本文介绍关于Linux系统(适用于centos/ubuntu等)的磁盘io性能测试工具-fio.磁盘io性能测试工具包括: fio: dd
- ## ucore Lab0 一些杂记
ucore Lab0 一些杂记 前一阵子开始做 MIT 6.828,做了两三个实验才发现清华的 ucore 貌似更友好一些,再加上前几个实验也与6.828 有所重叠,于是决定迁移阵地. 文章计划分两类 ...
- vscode 黑屏及类名报错解决方案
1.安装vscode之后打开黑屏,解决方案如下图,右键--属性--兼容性--勾选上 2.vscode 类名总报错 是ES2017的语法修饰器引起vscode警告. 解除的方法如果你使用的typescr ...
- nginx_mirror_module流量复制在项目中的应用
参考文档:https://my.oschina.net/andChow/blog/2873870 https://blog.csdn.net/lancerh/article/details/88645 ...