10款精美的HTML5图片轮播动画+打包源码下载

今天要给大家分享10款精美的HTML5图片轮播/切换动画，这些动画每一个都有自己的特点，不管你是PC端的网页，还是移动端的H5应用，都可以尝试使用这些动画来提高应用的用户体验。

❝
PS：请你耐心看完，文末我提供了所有动画的源码打包下载链接，如果你喜欢这些动画，可以按需下载，希望对你有所帮助。

1. 可无限水平滑动的JS画廊动画

这是一个简约而实用的JS画廊相册组件，它的特点是可以添加无限多张相片，并且支持水平无限循环滑动。另外它还支持对画廊中的相片进行展开和折叠，并同时动态展示相片的标题和描述。这款相册组件主要采用了jQuery插件以及CSS3的过渡动画特性，使用起来十分方便。

2. 基于TweenMax.js的图片碎裂切换动画

这是一个基于TweenMax动画库的图片碎裂切换动画，它的特点是点击图片时，图片就会像玻璃那样碎裂成许多块，然后渐渐地消失，直到下一张图片显示为止。这款图片碎裂动画也可以应用在焦点图的切换动画中，效果非常不错。

3. 基于Swiper.js的视差效果图片滑块动画

Swiper.js是一个流行的移动端轮播图插件，它提供了丰富的功能和配置项。这款图片滑块动画就是基于Swiper.js实现的，它的特点是图片切换的时候，图片上方将会出现白色背景的视差效果图层，并且它可以适配不同的浏览器尺寸。

4. 基于Three.js的图片撕碎切换动画

这又是一个非常酷的HTML5 Canvas图片切换动画，它是基于知名3D动画库threejs实现的。在图片切换过程中，你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果非常独特而华丽的相册或者焦点图插件，相信会很不错的。

5. CSS滤镜特效下的手风琴图片切换动画

这是一个纯CSS实现的手风琴特效的图片切换动画，它的特点是采用了CSS滤镜特效，首先将原图通过滤镜变换成黑白样式，鼠标滑过激活图片后，再将黑白图转换成原图，从而实现图片高亮的效果。

6. jQuery手风琴图片播放器可自动播放

这同样是一款手风琴特效的图片切换动画，它基于jQuery开发，是一款非常不错的jQuery图片轮播插件。它的特点是支持自动播放，使用简单，对于一些商品展示的站点或者app，比较适合使用。

7. HTML5 SVG实现的波浪切换图片动画

这是一款采用SVG遮罩来实现波浪样式的图片切换动画。所有的图片采用背景图片的方式，图片上方定义SVG圆形路径，通过对圆形svg路径的样式渲染，实现波浪切换的动画效果。

8. 基于jQuery的3D图片切换插件Slicebox

Slicebox是一款基于jQuery的图片切换插件，尽管jQuery在新的web系统中使用越来越少，但我们依然可以使用它的强大插件来丰富我们现有的网站。这款图片切换插件的特点是播放上一张或下一张图片时，图片会出现水平分裂或垂直分裂的3D视觉效果。

9. jQuery响应式图片切换插件，可自动播放

这款jQuery图片切换插件拥有简单的使用方法和灵活的扩展方式，支持单页面多实例，并且可适配不同的屏幕尺寸。另外通过配置，我们可以让图片切换组件支持自动播放、显示切换按钮、鼠标滑过放大图片等特性。

10. 纯CSS实现的水平3D图片滚动特效

这是一款纯CSS实现的图片滚动特效，它的特点是我们可以通过滚动浏览器的横向滚动条，可以让图片进行水平切换滚动。另外图片排列呈现3D投影的视觉效果，同时也可以在移动端通过手指滑动来实现图片的横向滚动浏览。

着css3实现各种炫酷动画效果越来越流行。今天给大家推荐一些css3和SVG实现loading加载动画效果。

先上一波令人愉悦的动画效果。

怎么样，是不是感觉很nice，那就继续往下看吧。这里为大家整理了一些不错的效果。

1、CSSFX

简单酷炸的css3效果，可一键复制css样式。

# 演示地址
https://cssfx.lovejade.cn/

# github地址
https://github.com/TheHumanComedy/cssfx

2、SVG Loaders

一个超棒的svg实现loading动画效果。

# 演示地址
http://samherbert.net/svg-loaders/

# github地址
https://github.com/SamHerbert/SVG-Loaders

3、SpinKit

非常棒的一款CSS3加载动画集合。star高达17.4K+。

# 演示地址
https://tobiasahlin.com/spinkit/

# github地址
https://github.com/tobiasahlin/SpinKit

4、CSS Spinners

一款有趣的单元素CSS3加载器。

# 演示地址
https://projects.lukehaas.me/css-loaders/

# github地址
https://github.com/lukehaas/css-loaders

5、Canvas Loaders

基于canvas实现的loading效果。

https://github.com/padolsey/sonic.js

6、CSS3 Loading Spinners

一组很酷的css3加载动画效果。

# 演示地址
https://codepen.io/Beaugust/pen/DByiE

7、Pure CSS3 Loader

有一组优秀的CSS3动画效果。

# 演示地址
https://codepen.io/viduthalai1947/pen/JkhDK

8、SVG Loading Images

一组SVG实现加载动画效果。

# 演示地址
https://codepen.io/aurer/pen/jEGbA

好了，就介绍到这里。希望对大家有所帮助！

SS3 Animations

1 @keyframes属性

@keyframes 动画名称{关键帧持续时间% {css样式;}}

@keyframes myanimation
{
    0% {top:0px;background-color:#0000cc;}
    50% {top:100px;background-color;#339900;}
    100% {top:0px;background-color:#330000;}
}

2 animation属性

animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间, 以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

linear 动画从头到尾的速度是相同的。

ease 默认。动画以低速开始, 然后加快, 在结束前变慢。

ease-in 动画以低速开始。

ease-out 动画以低速结束。

ease-in-out 动画以低速开始和结束。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。参考地址: http://cubic-bezier.com/#.17,.67,.83,.67

animation-delay 规定在动画开始之前的延迟。以秒或毫秒计, 默认值是 0。

animation-iteration-count 规定动画应该播放的次数。

n 定义动画播放次数的数值。

infinite 规定动画应该无限次播放。

animation-direction 规定是否应该轮流反向播放动画。

normal 默认值。动画应该正常播放。

alternate 动画应该轮流反向播放。

使用方法一: from...to...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    background-color: orange;

}

/*div:hover{
width: 800px;
}*/
/*@keyframes 动画名{
from{
动画第一步(这里你可以不写他会继承上面的)
}
to{
动画最后一步
}
}*/
/*动画声明*/
@keyframes widthChange{
/*from{
width: 100px;
}*/
to{
width: 800px;
}
}
div{
    /*animation: 动画名称 过渡总时长;*/
    animation: widthChange 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

使用方法二: 百分比

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}

/*动画声明*/
@keyframes positionChange{
    /*from{
    left: 0;
    }
    to{
    left: 800px;
    }*/
    /*百分数评分的的过渡总时长*/
    0%{
    left: 0;
    top: 0;
    }
    50%{
    left: 800px;
    top: 0;
    }
    100%{
    left: 800px;
    top: 500px;
    }
}
div{
    /*animation: 动画名称 过渡总时长;*/
    animation: positionChange 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

使用方法三: animation参数格式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    background-color: orange;

}
@keyframes widthChange{
    to{
    width: 800px;
    }
}
div{
    /*
    * 动画名称
    * 动画总时长s ms
    * 动画形式ease ease-in ease-out ease-in-out linear 贝塞尔曲线、
    * 延迟时间s ms
    * 循环次数①阿拉伯数字②infinite(无限次)
    * 停留到最后一帧forwards
    * 反向播放动画alternate(来回当做2次处理) normal 正常
    *
    * */
    animation: widthChange 5s;
}
div:hover{
/*动画停止*/
animation-play-state: paused
}
</style>
</head>
<body>
<div></div>
</body>
</html>

建立3D场景

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

注释：该属性必须与 transform 属性一同使用。

flat 子元素将不保留其 3D 位置。

preserve-3d 子元素将保留其 3D 位置。

transform-style: flat|preserve-3d;

perspective 属性定义 3D 元素距视图的距离, 以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时, 其子元素会获得透视效果, 而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

perspective: number|none;

景深:

perspective是设置3d效果的景深, 通俗来说就是设置你的眼睛与这个3d元素的距离。

而生活经验告诉我们, 你从远处和近处分别观察同一个物体(比如正方形)时, 其3d效果肯定是不同的。

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

当为元素定义 perspective-origin 属性时, 其子元素会获得透视效果, 而不是元素本身。

注释：该属性必须与 perspective 属性一同使用, 而且只影响 3D 转换元素。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
div{
    width: 300px;
    height: 220px;
    margin: 100px auto;
    border: 1px solid #000;

    transform-style: preserve-3d;
    perspective: 800px;

    /*景深基点基本上没人改*/
    perspective-origin: left top;
}
img{
    width: 100%;
    display: block;
    transition: 1s;
    }
    div:hover>img{
    transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div>
<img src="img/薛凯琪.jpg"/>
</div>
</body>
</html>

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时, 该属性很有用。

背面隐藏

在线咨询

上一篇：宝宝开口第一个词既不是“妈”也不是“爸”…爹妈和网友们全都懵逼了
下一篇：html常用代码大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商