Linux制作百叶窗代码,Html5百叶窗效果的示例代码

2023-10-13 12:40

本文主要是介绍Linux制作百叶窗代码,Html5百叶窗效果的示例代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

实现方法介绍:

1,百叶窗布局 用定位(position: absolute)覆盖在content布局之上,背景设置为透明(background-color: transparent)

2,keyframes定义淡入淡出(透明度改变)和百叶窗口效果动画。

3,启动动画是通过设置DOM的className属性的方法,animator.className = 'baiyeWindow'; 监听动画完成事件'animationend',要清除className属性。

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

5,动画执行时序图:

3e8f635ca3c13dd4a16c7db69d41da6c.png

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);

};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

这篇关于Linux制作百叶窗代码,Html5百叶窗效果的示例代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/203290

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

Linux系统配置NAT网络模式的详细步骤(附图文)

《Linux系统配置NAT网络模式的详细步骤(附图文)》本文详细指导如何在VMware环境下配置NAT网络模式,包括设置主机和虚拟机的IP地址、网关,以及针对Linux和Windows系统的具体步骤,... 目录一、配置NAT网络模式二、设置虚拟机交换机网关2.1 打开虚拟机2.2 管理员授权2.3 设置子

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放