Html5百叶窗效果的示例代码_html5教程技巧

来源：UU财经

本篇文章主要介绍了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;
 }
 }
 }

JS代码：

显示全文

全部频道

Html5百叶窗效果的示例代码_html5教程技巧