百叶窗设计原理 html5,Html5百叶窗效果的示例代码_html5教程技巧
本篇文章主要介绍了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代码:
...
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代码:
//切换布局
$scope.switchLayout = function(){
...
$scope.startBaiYeWindow();
//启动动画0.5s后,控制布局显示/隐藏
$timeout(function () {
if ($scope.show) {
$scope.show = false;
} else {
....
}
}, 500);
}
//启动动画
$scope.startBaiYeWindow = function () {
var animator = document.getElementById('baiyeWindow');
var animatorFadeInOut = document.getElementById('fadeInOut');
animator.addEventListener('animationend', function () {
animator.className = '';
animatorFadeInOut.className = 'content';
});
$timeout(function () {
animator.className = 'baiyeWindow';
animatorFadeInOut.className = 'content fade-animation';
}, 0);
};
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持jquery中文网。
相关推荐:
最全的HTML5全局属性汇总
移动端HTML5中判断横屏竖屏的方法
HTML5单页面手势滑屏切换原理分析
百叶窗设计原理 html5,Html5百叶窗效果的示例代码_html5教程技巧相关推荐
- html5模仿手机音乐播放器,仿酷狗html5手机音乐播放器主要部分代码_html5教程技巧...
HTML5作品,经测试,效果确定不错,遗憾的是只支持谷歌和苹果等以webkit核心的浏览器,网友体验的时候请使用谷歌等浏览器来运行,不然的话无法看到效果,不说了,看效果吧 代码如下: 主要部分代码如下 ...
- html5应用转换教程,20佳惊艳的HTML5应用程序示例分享_html5教程技巧
1-HTML5 Canvas Collage 基于HTML5 Canvas开发的拼贴应用,每个图层都可以按不同的方式进行改变,例如移动.缩放.旋转.透明度.阴影等,还可以调整层叠顺序. 2-Full ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- 父爱动画代码python_pygame用blit()实现动画效果的示例代码
pygame的的实现动画的方法有很多,但是都是围绕着表面进行的,也就是说实现动画的方式不同,但是本质其实都是对表面的不同处理方式而已. 原理其实很简单,有点像我们做地铁的时候隧道里的广告一样.我们设置 ...
- python pygame 动画_pygame用blit()实现动画效果的示例代码
pygame的的实现动画的方法有很多,但是都是围绕着表面进行的,也就是说实现动画的方式不同,但是本质其实都是对表面的不同处理方式而已. 原理其实很简单,有点像我们做地铁的时候隧道里的广告一样.我们设置 ...
- html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
- html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
- php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
- html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
最新文章
- Linux如何实现断点续传文件功能?
- @import和@class的区别
- ASP错误捕获的几种常规处理方式
- Cloudera Manager安装之Cloudera Manager安装前准备(Ubuntu14.04)(一)
- r语言解释回归模型的假设_模型假设-解释
- 表弟面试被虐,我教他缓存连招,借机蹭了波奈雪的茶
- 常用JavaScript函数 59 - 70(自我总结)
- 程序设计基础(C语言)课程设计报告,C语言程序设计基础课程设计报告.doc
- BIM工程信息管理系统-详细设计
- mongodb的学习过程
- 微信公众号“一键关注”功能开启及转发制作.
- matlab画圆函数
- tomcat编码配置gbk_Tomcat中的编码问题
- VBA读excel写xml
- nginx 499 错误的解决
- javascript操作div中的marginTop
- 用微信第三方平台授权小程序业务
- windows terminal ssh连接
- 美国第一个设置计算机的学校,美国计算机专业院校
- onclick事件传参时传中文传不过去
热门文章
- 开了gomod不识别gopath_三分钟掌握Go mod常用与高级操作
- GeoHash -------寻找附近人
- Python-函数递归调用
- Keepalived 主备配置
- 在嵌入式Jetty(Embedded Jetty)中部署FastCGI Servlet载入PHP程序
- 那些年,我还在学习actionscript
- Samba服务器如何与Windows 95共享?
- myBatis异常提示For input string: {1=null}
- NCspider项目总结
- JSONP的诞生、原理及应用实例