轮播图CSS
css3中的animation:动画名 持续时间 动画的速度曲线 动画开始之前的延迟 动画播放的次数 是否应该轮流反向播放动画
动画播放次数:n(定义应该播放多少次动画) ; infinite(无限循环)
动画延迟:ns (默认为零)
是否反向播放: normal alterna
动画的速度曲线; linear (匀速);ease(默认 先快然后加速,最后变慢);ease-in(以低速开始);ease-out(以低速结束);ease-in-out(动画一低速开始和结束)
cubic-bezier(n,n,n,n)
@keyframes(用来改变动画轨迹或者效果)和animate
1需要创建一个名字,后面绑定动画时需要
2.from 起始时0%
3 to到达终点时等同于100%
box-sizing属性:content-box(border和padding值不计算在width之内);padding-box(padding计算在width之内);border-box(border和padding计算在width之内)
content属性:
a:after
{
content: " (" attr(href) ")";
}
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="imgs">
<a href="javascript:void(0);" class="first-img"><img src="img/img1.jpg"></a>
<a href="javascript:void(0);"><img src="img/img2.jpg"></a>
<a href="javascript:void(0);"><img src="img/img3.jpg"></a>
<a href="javascript:void(0);"><img src="img/img4.jpg"></a>
<a href="javascript:void(0);"><img src="img/img5.jpg"></a>
</div> <div class="controller">
<div class="show-static"></div>
<div class="show-run"></div>
<a class="controller-tag1" href="javascript:void(0);"><img src="img/img1.jpg"></a>
<a class="controller-tag2" href="javascript:void(0);"><img src="img/img2.jpg"></a>
<a class="controller-tag3" href="javascript:void(0);"><img src="img/img3.jpg"></a>
<a class="controller-tag4" href="javascript:void(0);"><img src="img/img4.jpg"></a>
<a class="controller-tag5" href="javascript:void(0);"><img src="img/img5.jpg"></a> </div> </body>
</html> CSS:
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
width: 1200px;
margin: 50px auto;
border: solid 1px #ccc;
}
.imgs {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
}
.main a {
display: block;
width: 100%;
height: 100%;
}
.imgs a:first-child{
animation: imgAnimate 18s linear infinite alternate;
}
.imgs:hover > .first-img,
.imgs:hover + .controller .show-run {
animation-play-state: paused;
}
.imgs a img {
width: 100%;
height: 100%;
}
.controller {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
width: 80%;
height: 40px;
margin: 0 auto;
margin-top: 560px;
}
.controller .show-run {
margin-bottom: -17px;
height: 16px;
width: 20%;
background: #FDB024;
animation: showAnimate 18s linear infinite alternate;
}
.controller .show-static {
margin-bottom: -17px;
height: 17px;
width: 100%;
background: #575757;
}
.controller a {
display: block;
box-sizing: border-box;
float: left;
width: 20%;
height: 17px;
margin: 0px;
border: solid 1px #CCC;
}
.controller a img {
display: none;
box-sizing: border-box;
width: 100%;
height: 150px;
margin-top: -160px;
border: solid 1px #FDB024;
} .controller a::after {
position: relative;
content: "";
display: none;
margin-left: -20px;
left: 50%;
width: 10px;
height: 0px;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top: solid 10px #FDB024;
}
.controller-tag1:hover > img,
.controller-tag1:hover::after{
display: block;
}
.controller-tag2:hover > img,
.controller-tag2:hover::after{
display: block;
}
.controller-tag3:hover > img,
.controller-tag3:hover::after{
display: block;
}
.controller-tag4:hover > img,
.controller-tag4:hover::after{
display: block;
}
.controller-tag5:hover > img,
.controller-tag5:hover::after{
display: block;
} @keyframes imgAnimate
{
0% {
margin-top: 0px;
}
11.11% {
margin-top: 0px;
}
22.22% {
margin-top: -600px;
}
33.33% {
margin-top: -600px;
}
44.44% {
margin-top: -1200px;
}
55.55% {
margin-top: -1200px;
}
66.66% {
margin-top: -1800px;
}
77.77% {
margin-top: -1800px;
}
88.88% {
margin-top: -2400px;
}
100% {
margin-top: -2400px;
}
} @keyframes showAnimate
{
0% {
margin-left: 0px;
}
11.11% {
margin-left: 0px;
}
22.22% {
margin-left: 20%;
}
33.33% {
margin-left: 20%;
}
44.44% {
margin-left: 40%;
}
55.55% {
margin-left: 40%;
}
66.66% {
margin-left: 60%;
}
77.77% {
margin-left: 60%;
}
88.88% {
margin-left: 80%;
}
100% {
margin-left: 80%;
}
}
轮播图CSS的更多相关文章
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 用 CSS 做轮播图
对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- jquery里面的attr和css来设置轮播图竟然效果不一致
/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...
- html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...
- css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
- 纯HTML和CSS实现JD轮播图
博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识. ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...
随机推荐
- 内存原理与PHP的执行过程
一.内存结构 栈区:保存的是变量名(术语:引用),对于cpu来说,读写速度很快 堆区:存储“复杂”的数据,数组.对象.字符串(字符串比较特殊)等 数据段:又分为数据段全局区(用于存储简单的数据,如数字 ...
- [APIO2012]派遣 左偏树
P1552 [APIO2012]派遣 题面 考虑枚举每个节点作为管理者,计算所获得的满意程度以更新答案.对于每个节点的计算,贪心,维护一个大根堆,每次弹出薪水最大的人.这里注意,一旦一个人被弹出,那么 ...
- 搭建自己的博客(九):使用shell模式批量添加博客文章并增加分页功能
想做个博客分页功能,但是没有太多的文章.所以使用shell命令行创建多篇文章. 1.打开pycharm下的terminal终端 python manage.py shell # 打开python终端 ...
- python合并多个txt文件
python合并多个txt文件 #合并一个文件夹下的多个txt文件 #coding=utf-8 import os #获取目标文件夹的路径 filedir = os.getcwd()+'\\数据' # ...
- docker安装mysql5.7 数据挂载
docker安装mysql5.7,并数据卷挂载到主机 # docker 中下载 mysql docker pull mysql:5.7 #启动 docker run --name mysql3306 ...
- cesium地下模式(地表透明)3
这篇博客主要解决“瓦片的白色网格”问题 设置skirt=0可以解决这个问题,需要设置3个地方 1.HeightmapTerrainData.js createMesh方法 this._skirtHei ...
- mysql和mssql数据库快速创建表格 五
* into testAAA FROM tbl_User --sqlserver方法一复制表结构 select * into testAAA FROM tbl_User --sqlserver复制表结 ...
- IdentityServer4入门四:应用Implicit模式保护网站(下)
为认证服务端增加数据库支持 我计划使用一个名为Admin的表,放在一个已有的数据库里.所以我需要定义Admin类和在配置里预先加上数据库连接 新增类:Admin.cs public class Adm ...
- DES算法实现
概述(团队项目) DES是一个分组加密算法,它以64位为分组对数据加密.同时DES也是一个对称算法:加密和解密用的是同一个算法.DES是一个包含16个阶段的"替换–置换"的分组加密 ...
- Docs-.NET-C#-指南-语言参考-预处理器指令:#define(C# 参考)
ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#define(C# 参考) 1.返回顶部 1. #define(C# 参考) 2018/06/30 使用 #define 来定 ...