CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 酷毙了!三种风格的全屏幻灯片效果

酷毙了!三种风格的全屏幻灯片效果

       今天,我们想向您展示如何创建平铺背景图像的幻灯片效果。其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看。


  这个幻灯片效果是由四个区域的独立移动构成,通过画面分割,同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。除了这种效果我们也将添加两个更多的变化,我们的宗旨是实现超流畅的交互体验。


源码下载      在线演示

        对于幻灯片,我们需要一个特殊的 HTML 结构来实现四个不同的页面区域,每个区域都使用相同的图像,但用了不同的定位,让四个区域拼起来刚好是一张完整的背景图片。我们需要确保内容充满整个页面,因为这是一个全屏幻灯片效果。


  我们先定义一个简单的初始结构,能够指定在每个面板(或幻灯片)中哪张图像会显示,然后创建我们的重复结构的片段。所以,最初我们希望是这样的:


  1. <div id="boxgallery" class="boxgallery" data-effect="effect-1">
  2. <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
  3. <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
  4. <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
  5. <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
  6. </div>
复制代码


       为了能够通过把图片分解成片段来实现动画效果,我们将需要为每个面板定义下面这样的结构:


  1. div id="boxgallery" class="boxgallery" data-effect="effect-1">
  2. <div class="panel current">
  3. <div class="bg-tile">
  4. <div class="bg-img"><img src="img/1.jpg" /></div>
  5. </div>
  6. <div class="bg-tile">
  7. <div class="bg-img"><img src="img/1.jpg" /></div>
  8. </div>
  9. <div class="bg-tile">
  10. <div class="bg-img"><img src="img/1.jpg" /></div>
  11. </div>
  12. <div class="bg-tile">
  13. <div class="bg-img"><img src="img/1.jpg" /></div>
  14. </div>
  15. </div>
  16. <div class="panel">
  17. <div class="bg-tile">
  18. <div class="bg-img"><img src="img/2.jpg" /></div>
  19. </div>
  20. <div class="bg-tile">
  21. <div class="bg-img"><img src="img/2.jpg" /></div>
  22. </div>
  23. <div class="bg-tile">
  24. <div class="bg-img"><img src="img/2.jpg" /></div>
  25. </div>
  26. <div class="bg-tile">
  27. <div class="bg-img"><img src="img/2.jpg" /></div>
  28. </div>
  29. </div>
  30. <div class="panel">
  31. <!-- ... -->
  32. </div>
  33. <div class="panel">
  34. <!-- ... -->
  35. </div>
  36. <nav>
  37. <span class="prev"><i></i></span>
  38. <span class="next"><i></i></span>
  39. </nav>
  40. </div>
复制代码


       当然,你可能看上面的结构可能会问为什么不使用背景图片而用图像元素?其实在尝试使用各种方式对比之后,我们在试验后得出结论,使用背景图像与设置背景大小的方式可能会导致过渡效果有问题。例如使用 background-size: cover 会导致转换动画出现颤抖现象。


  我们还需要添加一个导航,这样我们就可以通过面板进行浏览。上面我们还用到了数据属性,里面设置了动画的效果。下面,让我们添加一些样式到这个效果中。需要注意的是,这里演示的 CSS 将不包含任何浏览器的前缀,但在源码文件是有的。


  首先,我们在全屏模式,所以为了让我们的页面布满窗口,需要设置如下:


  1. html, body, .container {
  2. height: 100%;
  3. }
复制代码


主容器和子元素都将绝对定位,面板将占据所有的宽度和高度:


  1. .js .boxgallery,
  2. .js .boxgallery div {
  3. position: absolute;
  4. }
  5.   

  6. .js .boxgallery,
  7. .js .panel {
  8. top: 0;
  9. left: 0;
  10. width: 100%;
  11. height: 100%;
  12. }
复制代码


 由于我们的效果将可能有元素超出自己的区域,我们还需要确保不会溢出:


  1. .js .boxgallery,
  2. .bg-tile,
  3. .bg-img {
  4. overflow: hidden;
  5. }
复制代码


 这个例子有三种效果,下面是用于第一效果的 CSS 动画效果代码:




  1. .boxgallery[data-effect="effect-1"] .panel.active .bg-tile,

  2. .boxgallery[data-effect="effect-2"] .panel.active .bg-tile {

  3.     animation: scaleDown 1.1s ease-in-out;

  4. }

  5.   

  6. @keyframes scaleDown {

  7.     from { transform: translate3d(0,0,380px); }

  8.     to { transform: translate3d(0,0,0); }

  9. }
复制代码




源码下载      在线演示





【酷毙了!三种风格的全屏幻灯片效果】相关文章

1. 酷毙了!三种风格的全屏幻灯片效果

2. 带幻灯片效果的全屏背景jQuery插件:Vegas2

3. HTML5的音频和JQUERY的全屏幻灯片

4. HTML5的音频和JQUERY的全屏幻灯片

5. 实现内容倾斜的 3D 幻灯片效果

6. 实现苹果风格的单页滚动效果

7. 用纯CSS3实现图片幻灯片切换效果

8. 使用jQuery和CSS3创建一个全屏幕幻灯效果

9. 使用jQuery和CSS3创建一个全屏幕幻灯效果

10. Material Design风格的前端框架免费下载

本文来源:https://www.51html5.com/a1073.html

点击展开全部

﹝酷毙了!三种风格的全屏幻灯片效果﹞相关内容

「酷毙了!三种风格的全屏幻灯片效果」相关专题

其它栏目

也许您还喜欢