css百叶窗效果,js百叶窗效果

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

　　实现方法介绍：

　　1,百叶窗布局用定位（位置：绝对)覆盖在内容布局之上，背景设置为透明（背景色：透明)

　　2、关键帧定义淡入淡出（透明度改变)和百叶窗口效果动画。

　　3,启动动画是通过设置数字正射影像图的类名属性的方法，动画师。class name=" baiyeWindow监听动画完成事件动画结束，要清除类名属性。

　　4,在内容布局切换的事件，调用启动动画方法，两个布局都需要绑定切换事件ng-click=switchLayout()

　　5,动画执行时序图：

　　超文本标记语言代码：

　　！-要显示百叶窗效果的布局-切换内容-div id= fade inout class= content ng-click= switch layout()./div！-百叶窗布局-ul id= baiyeWindow ng-click= switch layout() lidiv class= ye /div/Li Li div class= ye /div/Li Li div class= ye /div/Li Li class= ye /div/Li/ulcss样式代码：

　　//谈入谈出效果fade-animation { @-WebKit-关键帧淡入淡出{ 0% { opacity:1；} 50% {不透明度：0;} 100% {不透明度：1;} } @关键帧淡入淡出{ 0% { opacity:1；} 50% {不透明度：0;} 100% {不透明度：1;} }动画：fadeInOut 1s淡入；-WebKit-动画：fade inout 1s ease-in；} //百叶窗效果baiyeWindow{宽度：100%;身高：1.68雷姆；位置：绝对；左：0;top:1.2雷姆；李（身高：0.42米；行高：40px溢出：隐藏；背景色：透明；叶{-WebKit-动画：滑出1s缓入缓出；动画：滑出1s渐出；宽度：100%;背景色：rgba(0，0，0，2);位置：相对；top:50%；} } @-WebKit-关键帧滑出{ 0% {底部填充：0；top:50%；} 100% {填充-底部：40pxtop:0；} } @关键帧滑出{ 0% {底部填充：0；top:50%；} 100% {填充-底部：40pxtop:0；} } }JS代码：

　　//切换布局$ scope。开关布局=function(){.$ scope。startbaiyewindow()；//启动动画0.5s后，控制布局显示/隐藏$ time out(function(){ if(scope。show){ $ scope。show=false}否则{.} }, 500);}//启动动画$ scope。startbaiyewindow=function(){ var animator=document。getelementbyid( baiyeWindow )；var animatorFadeInOut=document。getelementbyid( fade inout )；动画师。addevent listener( animation end ，function(){ animator。类名=“”)；animatorfadeinout。class name= content});$ time out(function(){ animator。class name=白烨窗口)；animatorfadeinout。class name= content fade-animation ；}, 0);};以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。