图片/图形

CSS3炫酷全屏百叶窗效果幻灯片特效

阿里云


这是一款使用纯 CSS3 制作的效果非常炫酷的全屏百叶窗效果幻灯片特效。该幻灯片特效使用全屏背景图片制作,在幻灯片切换的时候图片会以百叶窗的方式隐藏和展现,效果非常不错。

HTML 结构

该幻灯片特效的 HTML 结构采用嵌套<div>的 HTML 结构,前后导航按钮使用<input>和<label>来制作。

也想出现在这里?联系我们
创客主机
  1. <div class="slider">
  2.   <input name="control" id="page1" type="radio" checked/>
  3.   <input name="control" id="page2" type="radio"/>
  4.   <input name="control" id="page3" type="radio"/>
  5.   <input name="control" id="page4" type="radio"/>
  6.   <div class="slider--el slider--el-1 anim-4parts">
  7.     <div class="slider--el-bg">
  8.       <div class="part top left"></div>
  9.       <div class="part top right"></div>
  10.       <div class="part bot left"></div>
  11.       <div class="part bot right"></div>
  12.     </div>
  13.     <div class="slider--el-content">
  14.       <h2 class="slider--el-heading">First slide</h2>
  15.     </div>
  16.   </div>
  17.   ......
  18.   <div class="slider--control left">
  19.     <label class="page1-left" for="page1"></label>
  20.     <label class="page2-left" for="page2"></label>
  21.     <label class="page3-left" for="page3"></label>
  22.     <label class="page4-left" for="page4"></label>
  23.   </div>
  24.   <div class="slider--control right">
  25.     <label class="page1-right" for="page1"></label>
  26.     <label class="page2-right" for="page2"></label>
  27.     <label class="page3-right" for="page3"></label>
  28.     <label class="page4-right" for="page4"></label>
  29.   </div>
  30. </div>

百叶窗效果是通过在每个幻灯片中添加空的<div>,每个空<div>控制背景图片的一部分,然后使用 CSS 来制作动画效果。

CSS 样式

整个幻灯片采用绝对定位,宽度和高度都为 100%。

  1. .slider--el {
  2.   z-index: 1;
  3.   position: absolute;
  4.   top: 0;
  5.   left: 0;
  6.   width: 100%;
  7.   height: 100%;
  8.   -webkit-transition: -webkit-transform 2.8s, z-index 0.1s;
  9.           transition: transform 2.8s, z-index 0.1s;
  10.   overflow: hidden;
  11. }

第一幅幻灯片中共分为 4 个图块,每个图块宽度和高度都设置为 50.2%。并通过 will-change 属性来优化动画性能。

  1. .slider--el.anim-4parts .part {
  2.   position: absolute;
  3.   width: 50.2%;
  4.   height: 50.2%;
  5.   overflow: hidden;
  6.   will-change: transform;
  7. }

接下来使用:before 伪元素来为每一个图块添加背景图片,通过 top 和 left 来定位背景图片。使 4 个图块分别显示整幅图片的不同部分。

  1. .slider--el.anim-4parts .part:before {
  2.   content: "";
  3.   display: block;
  4.   position: absolute;
  5.   background-size: cover;
  6.   width: 200%;
  7.   height: 200%;
  8.   background-image: url("aT2vggq.jpg");
  9. }
  10. .slider--el.anim-4parts .part.top {
  11.   top: 0;
  12.   -webkit-transition: -webkit-transform 1.3s 0.3s;
  13.           transition: transform 1.3s 0.3s;
  14. }
  15. .slider--el.anim-4parts .part.top:before {
  16.   top: 0;
  17. }   
  18. ......

然后在点击导航按钮之后通过 translateX 属性分别将它们移出屏幕之外。

  1. .slider--el.anim-4parts .left {
  2.   -webkit-transform: translateX(-100%);
  3.       -ms-transform: translateX(-100%);
  4.           transform: translateX(-100%);
  5. }
  6. .slider--el.anim-4parts .right {
  7.   -webkit-transform: translateX(100%);
  8.       -ms-transform: translateX(100%);
  9.           transform: translateX(100%);
  10. }

其它代码请参考下载文件。

CSS3 炫酷全屏百叶窗效果幻灯片特效

已有 394 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!