css3实现轮播图
css3动画属性简写：
animation: name duration timing-function delay iteration-count direction fill-mode;
参数：name：需要绑定到选择器的 keyframe 名称;
duration：动画完成时间
timing-function：动画速度曲线
delay：动画开始前延迟
iteration-count：动画播放次数
direction：是否轮流反向播放动画
fill-mode：动画在播放之前或之后，其动画效果是否可见
play-state：动画是否正在运行或暂停，不能简写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 实现轮播图</title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#container{
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
}
.pic{
list-style: none;
width: 800px;
position: absolute;
left: ;
animation-name: carousel;
animation-duration: 2s;
animation-iteration-count: infinite;
}
ul li{
float: left;
}
img{
width: 200px;
height: 100px;
} @keyframes carousel{
%,%{
left: ;
}
%,%{
left: -200px;
}
%,%{
left: -400px;
}
%{
left: -600px;
}
}
</style>
</head>
<body>
<div id="container">
<ul class="pic">
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
<li><img src="1.jpg"/></li>
</ul>
</div>
</body>
</script>
</html>
css3实现轮播图的更多相关文章
- CSS3实现轮播图效果
CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...
- 纯CSS3实现轮播图
前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3实现轮播图效果2
先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: <div class="box"> <ul> <li& ...
- css3百叶窗轮播图效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用css实现轮播图
使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...
- CSS3最简洁的轮播图
<!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...
- 纯CSS3轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
随机推荐
- vue中通过js控制页面样式方法
在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...
- js判断传入时间和当前时间大小
//判断时间是否过期 function judgeTime(time){ var strtime = time.replace("/-/g", "/");//时 ...
- [修改高通平台WIFI MAC 地址] & [adb over wifi]
[修改高通平台WIFI MAC 地址]fccmd --helpfccmd startfccmd getwifimacfccmd setwifimac 74:AC:5F:F5:D7:40 [adb ov ...
- JS对以对象组成的数组去重
这是从https://segmentfault.com/q/1010000006954351参考的,达到了我要去重的功能!!! var hash = {};//arr是要去重的对象数组 arr = a ...
- 10、Latent Relational Metric Learning via Memory-based Attention for Collaborative Ranking-----基于记忆注意的潜在关系度量协同排序
一.摘要: 本文模型 LRML(潜在相关度量学习)是一种新的度量学习方法的推荐.[旨在学习用户和项目之间的相关关系,而不是简单的用户和项目之间的push和pull关系,push和pull主要针对LMN ...
- Iterator与Asyc/Await的实现
https://wanago.io/2018/04/23/demystifying-generators-implementing-async-await/
- [luogu1772 ZJOI2006] 物流运输 (最短路 线性dp)
题目描述 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格的管理和跟踪. ...
- GRUB 引导流程
GRUB(bootloader)引导流程: GRUB,GRand Unified Bootlader ,是一个来自GUN项目的多操作系统启动程序.GRUB是多启动规范的实现,它允许用户可以在计算机内 ...
- python中return和print的区别（详细）
huskiesir最近在研究python哈,今天纠结一个问题,那就是return和print的区别,都是可以输出结果的,到底有啥区别呀?二话不多说,看下面的例子. #代码1: def break_wo ...
- 2019-03-14 Python爬虫问题 爬取网页的汉字打印出来乱码
html = requests.get(YieldCurveUrl, headers=headers) html=html.content.decode('UTF-8') # print(html) ...