Html5百叶窗效果的示例代码_html5教程技巧-木庄网络博客

本文摘自PHP中文网，作者韦小宝，侵删。

本篇文章主要介绍了Html5百叶窗效果的示例代码，小编觉得挺不错的，现在分享给大家HTML5源码和解释，也给大家做个参考。对HTML5感兴趣的小伙伴可以一起跟随小编过来看看吧

本文介绍了Html5百叶窗效果的示例代码，分享给大家，具体如下：

实现方法介绍：

1，百叶窗布局用定位(position: absolute)覆盖在content布局之上，背景设置为透明（background-color: transparent）
2，keyframes定义淡入淡出（透明度改变）和百叶窗口效果动画。
3，启动动画是通过设置DOM的className属性的方法，animator.className = 'baiyeWindow'; 监听动画完成事件'animationend'，要清除className属性。
4，在内容布局切换的事件，调用启动动画方法，两个布局都需要绑定切换事件 ng-click="switchLayout()"
5，动画执行时序图：

html代码:

<!--要显示百叶窗效果的布局--切换内容-->
<p id="fadeInOut" class="content"  ng-click="switchLayout()">
...
</p>
<!--百叶窗布局-->
 <ul id="baiyeWindow"  ng-click="switchLayout()">
       <li><p class="ye"></p></li>
        <li><p class="ye"></p></li>
        <li><p class="ye"></p></li>
        <li><p class="ye"></p></li>
  </ul>

css样式代码：

//谈入谈出效果
.fade-animation{
       @-webkit-keyframes fadeInOut {
         0% {
           opacity: 1;
         }
         50% {
           opacity: 0;
         }
         100% {
           opacity: 1;
         }
       }
   @keyframes fadeInOut {
         0% {
           opacity: 1;
         }
         50% {
           opacity: 0;
         }
         100% {
           opacity: 1;
         }
       }
       animation: fadeInOut 1s ease-in;
       -webkit-animation: fadeInOut 1s ease-in;
     }
     //百叶窗效果
     .baiyeWindow{
       width: 100%;
       height: 1.68rem;
       position: absolute;
       left: 0;
       top: 1.2rem;
       li{
         height: 0.42rem;
         line-height: 40px;
         overflow: hidden;
         background-color: transparent;
         .ye{
           -webkit-animation: slideOut 1s ease-in-out;
           animation: slideOut 1s ease-in-out;
           width: 100%;
           background-color: rgba(0,0,0,.2);
           position: relative;
           top: 50%;
         }
       }
       @-webkit-keyframes slideOut {
         0% {
           padding-bottom: 0;
           top: 50%;
         }
         100% {
           padding-bottom: 40px;
           top: 0;
         }
       }
       @keyframes slideOut {
         0% {
           padding-bottom: 0;
           top: 50%;
         }
         100% {
           padding-bottom: 40px;
           top: 0;
         }
       }
     }