CSS3动画巧妙实现轮播图效果

C3增加了很多新的内容，其中动画部分更是分担了js引擎的内容，今天小编来分享一种简单的轮播图制作方法。

首先搭建两个嵌套关系的盒子，盒子最内部放入轮播图素材。

 <section><div><img src="./img/01.jpg" alt=""><img src="./img/02.jpg" alt=""><img src="./img/03.jpg" alt=""><img src="./img/04.jpg" alt=""><img src="./img/01.jpg" alt=""><img src="./img/02.jpg" alt=""><img src="./img/03.jpg" alt=""><img src="./img/04.jpg" alt=""></div></section>

接下来就是css部分了，首先我们需要搭建嵌套关系的盒子框架。

最外层的盒子作为展示框，内部的盒子作为轮播框，因此，外层盒子添加overflow属性隐藏溢出元素。

  * {margin: 0;padding: 0;}img {width: 200px;height: 100px;}section {width: 200px;height: 100px;overflow: hidden;margin: auto;}

接下来就是动画部分了。

   @keyframes lunbo {0% {transform: translate(0 ,0);}25% {transform: translate(0 ,200px);}50% {transform: translate(0 ,400px);}75% {transform: translate(0 ,600px);}100% {transform: translate(0 ,800px);}}

动画定义完成之后就是调用动画，这里采用的spets属性，来保证轮播图的停顿感觉。

 div {width: 1600px;height: 100px;font-size: 0;animation: lunbo 10s infinite;}

接下来就是完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}img {width: 200px;height: 100px;}section {width: 200px;height: 100px;overflow: hidden;margin: auto;}div {width: 1600px;height: 100px;font-size: 0;animation: lunbo 10s infinite;}@ @keyframes lunbo {0% {transform: translate(0 ,0);}25% {transform: translate(-200px,0);}50% {transform: translate(-400px,0);}75% {transform: translate(-600px,0);}100% {transform: translate(-800px,0);}}</style>
</head>
<body><section><div><img src="./img/01.jpg" alt=""><img src="./img/02.jpg" alt=""><img src="./img/03.jpg" alt=""><img src="./img/04.jpg" alt=""><img src="./img/01.jpg" alt=""><img src="./img/02.jpg" alt=""><img src="./img/03.jpg" alt=""><img src="./img/04.jpg" alt=""></div></section>
</body>
</html>

CSS3动画巧妙实现轮播图效果相关推荐

利用CSS3动画属性实现轮播图切换图片时出现附近内容抖动的解决办法。
利用CSS的动画完成轮播图功能,切换图片时发现,在QQ浏览器上轮播图切图时会影响附近内容抖动导致看起来模糊. 如下图: 轮播图切图时下面的内容:"办公家具"."更多&qu ...
（39）css3实现轮播图效果
css3的轮播图和js的轮播图的区别? css3:没有一些js的逻辑,优点,过渡动画比较漂亮,缺点:兼容问题.无法实现自动轮播和点击轮播一起同时出现的效果. js轮播图:js逻辑很多,可以做的很复杂, ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果实例
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
纯css3实现无缝轮播图效果
主要就是利用css3中的动画了,看完整实现代码如下: <!DOCTYPE html> <html lang="en"> <head><me ...
纯CSS实现轮播图效果，你不知道的CSS3黑科技
前言轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
java照片切换播放音乐_音乐播放器-图片切换-轮播图效果
* { margin: 0; padding: 0; border: 0; } CSS3 @keyframes 动画效果 @keyframs myframes{ from{ } to{ transfo ...

CSS3动画巧妙实现轮播图效果

CSS3动画巧妙实现轮播图效果相关推荐

最新文章

热门文章