CSS3之动画模块实现轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 188px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden; }
ul{
width: 2000px;
height: 188px;
background-color: black;
animation: move 10s linear 0s infinite normal;
}
ul li{
float: left;
list-style: none;
width: 300px;
height: 188px;
background-color: red;
border: 1px solid #000;
box-sizing: border-box; } ul:hover{
/*动画添加给谁, 就让谁停止*/
animation-play-state: paused;
}
/*
半透明，为了显示蒙版
*/ ul:hover li{
opacity: 0.5;
}
ul li:hover{
opacity: 1;
} ul li img {
width: 300px;
height: 188px;
}
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: -1200px;
}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="data:images/banner11.png" alt=""></li>
<li><img src="data:images/banner11.png" alt=""></li>
<li><img src="data:images/banner11.png" alt=""></li>
<li><img src="data:images/banner11.png" alt=""></li>
<!--这里添加两个，作为平滑的过渡-->
<li><img src="data:images/banner11.png" alt=""></li>
<li><img src="data:images/banner11.png" alt=""></li>
</ul>
</div> </body>
</html>
CSS3之动画模块实现轮播图的更多相关文章
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- CSS3——animation的基础（轮播图）
作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...
- Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画 function ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
- 利用CSS3实现图片无间断轮播图的实现思路
前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...
- Jquery基础（动画效果的轮播图特效）
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- css3爆炸效果更换图片轮播图
思路:给一个div设置一个背景图片1.jpg,然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span,并给这些span设置宽高.定位并设置背景图片0.jpg,然后设置每个sp ...
- css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...
随机推荐
- Unity攻略
Unity开发VR之Vuforia 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...
- s21day23 python笔记
s21day23 python笔记 一.内容回顾及补充 字符串格式化 %s # 示例一:特别注意:最后的右括号前面必须有逗号(,) msg = '我是%s,年龄%s'%('alex',19,) # 元 ...
- penn treebank的说明，包括很多语法知识
penn数据库说明 http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.9.8216&rep=rep1&type=pdf
- LeetCode 922. Sort Array By Parity II C++ 解题报告
922. Sort Array By Parity II 题目描述 Given an array A of non-negative integers, half of the integers in ...
- 学习笔记DL008:概率论，随机变量，概率分布，边缘概率，条件概率，期望、方差、协方差
概率和信息论. 概率论,表示不确定性声明数学框架.提供量化不确定性方法,提供导出新不确定性声明(statement)公理.人工智能领域,概率法则,AI系统推理,设计算法计算概率论导出表达式.概率和统计 ...
- macbook远程连接报错no matching cipher found
在.ssh/目录下添加config文件 Host xxx.xxx.xxx.xxx Ciphers 3des-cbc KexAlgorithms +diffie-hellman-group1-sha1 ...
- 通过junit写unit test
how to run test within junit & mvn: During team development , there are more than 1 person edit ...
- 使用C#的aforge类库识别验证码实例
一: 验证码处理 1. 一般处理原则 这种验证码为什么说跟没有一样,第一点:字体规范工整,第二点:不旋转扭曲粘连,第三点:字体颜色单一,下面看处理步骤. 这里要注意的是,aforge只接受像素格式为 ...
- Django学习笔记之上下文处理器和中间件
上下文处理器 上下文处理器是可以返回一些数据,在全局模板中都可以使用.比如登录后的用户信息,在很多页面中都需要使用,那么我们可以放在上下文处理器中,就没有必要在每个视图函数中都返回这个对象. 在set ...
- 雨燕apply项目总结
1,数据库默认值的问题 数据库尽量是非空的,然后不设置默认值,默认值由程序来设计 因为如果程序中设计有错误,应该是空值的地方没有没有处理掉,那插入数据库的时候应该报错,但如果你设置了默认值,排查将会变 ...