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>

转载于:https://www.cnblogs.com/xiaonanxia/p/10669055.html

CSS3之动画模块实现轮播图相关推荐

动漫轮播html,带17种内置过渡动画的jquery轮播图插件
bsc-slider是一款带17种内置过渡动画的jquery轮播图插件.该jquery轮播图插件可以制作最基本的轮播图效果,并内置17种过渡动画效果,还可以自定义动画的easing效果. 使用方法在 ...
利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊. 如下图: 轮播图切图时下面的内容:"办公家具"."更多&qu ...
CSS3动画巧妙实现轮播图效果
C3增加了很多新的内容,其中动画部分更是分担了js引擎的内容,今天小编来分享一种简单的轮播图制作方法. 首先搭建两个嵌套关系的盒子,盒子最内部放入轮播图素材. <section><d ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
jQuery和CSS3商品图片预览轮播图插件
这是一款非常实用的 jQuery和 CSS3创意商品图片预览轮播图插件.该轮播图插件以每个商品作为一个轮播图,用户可以在每个商品缩略图中查看该商品的颜色和款式.一般的商务网站都是通过图片来吸引用户, ...
JQ动画和特效轮播图
引用块内容 animate.css jquery-1.8.3.min.js JS中的代码 var pigs=['images/1.jpg','images/2.jpg','images/3.jpg'] ...
漂浮的云朵html,CSS3之动画模块实现云朵漂浮效果
动画模块-云层效果 * { margin:0; padding:0; } ul { height: 400px; background-color: skyblue; margin-top: 100p ...
html图片轮播怎么做的,CSS3制作轮播图的一种方法
轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种下面是style部分: 这几行都能明白吧 *{margin:0;padding:0;} a{text-decoration:n ...
html百叶窗切换效果,纯CSS3百叶窗式切换轮播图特效
这是一款使用纯CSS3制作的百叶窗式切换轮播图特效.该特效使用背景图片来制作,在轮播图切换时,通过一组div元素来制作百叶窗效果,非常的炫酷. 使用方法 HTML结构该轮播图特效中使用了6张背景图片 ...

CSS3之动画模块实现轮播图

CSS3之动画模块实现轮播图相关推荐

最新文章

热门文章