页面跳转淡入淡出效果代码

最新推荐文章于 2024-03-30 20:40:58 发布
原创 最新推荐文章于 2024-03-30 20:40:58 发布 · 3.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#transition

本文介绍如何通过简单的HTML元信息实现网页间的淡入淡出过渡效果，并提供了具体的代码示例。文中还列举了多种过渡动画选项。
部署运行你感兴趣的模型镜像

在需要淡入淡出的页面的<head></head>之间加入如下两行代码

<meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=6.0, transition=23)">
<meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=6.0, transition=23)">

即能实现页面间跳转时淡入淡出效果。

Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：
0 盒状收缩
1 盒状放射　
2 圆形收缩　
3 圆形放射　
4 由下往上
5 由上往下　
6 从左至右　
7 从右至左　
8 垂直百叶窗　
9 水平百叶窗
10 水平格状百叶窗　
11垂直格状百叶窗　
12 随意溶解　
13从左右两端向中间展开
14 从中间向左右两端展开　
15 从上下两端向中间展开
16 从中间向上下两端展开　
17 从右上角向左下角展开
18 从右下角向左上角展开　
19 从左上角向右下角展开
20 从左下角向右上角展开　
21 水平线状展开
22 垂直线状展开　
23 随机产生一种过渡方式

 

 

 

<meta http-equiv="page-enter" content="blendtrans(duration=1)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)"/>

 

您可能感兴趣的与本文相关的镜像

Langchain-Chatchat

Langchain-Chatchat

AI应用
Langchain

Langchain-Chatchat 是一个基于 ChatGLM 等大语言模型和 Langchain 应用框架实现的开源项目，旨在构建一个可以离线部署的本地知识库问答系统。它通过检索增强生成 (RAG) 的方法，让用户能够以自然语言与本地文件、数据库或搜索引擎进行交互，并支持多种大模型和向量数据库的集成，以及提供 WebUI 和 API 服务

Web入门：JQuery淡入淡出面板
小院里的霍大侠
12-14 331
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
vue项目（基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子）
06-21
搭建的简单地vue框架的例子，带有基本的请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss。以后会逐步完善，整合一些公共的方法、组件等等
jQuery实现淡入淡出效果
12-15
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
网页淡入淡出效果实践
iteye_130的博客
11-23 346
今天看到有个网站采用了淡入淡出效果，感觉挺酷的，所以就自己也做了一个小DEMO,下面是源代码。 page1.html: [code="html"] 网页淡入淡出效果演示 网页一 跳转到网页二 网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示 网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效...
网页淡入淡出效果（转载）
weixin_30848775的博客
05-24 348
网页的淡入淡出效果会让博客尤其是个人博客显的更加美观和个性，而这种效果的实现其实非常简单，只要将下面这两行代码 放入页面的head部分就可以了 <Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)"> <Meta http-equiv="Page-Exit" Conte...
vue路由切换之淡入淡出的简单实现
12-30
路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计 想让路由有过渡动画，需要在标签的...
jQuery 3D边框效果的淡入淡出焦点图特效代码.rar
07-10
"jQuery 3D边框效果的淡入淡出焦点图特效代码"是一个针对网页开发者的资源，它利用jQuery库实现了一种独特且引人注目的视觉效果。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等功能，...
JS实现大图淡入淡出特效代码教程
3. **淡入淡出动画实现原理**: 淡入淡出效果的实现通常依赖于CSS（层叠样式表）和JavaScript。CSS用来定义元素的初始状态和结束状态，而JavaScript则用来控制动画的开始、结束以及进度。通过改变元素的透明度...
WPF页面淡出淡入切换效果
09-04
在Windows Presentation Foundation (WPF) 中，开发人员可以利用丰富的动画功能来实现各种炫酷的用户界面效果，其中就包括页面之间的淡出淡入切换。这种效果能够为应用程序增添流畅和专业的视觉体验，提高用户的交互...
CSS3实现加载页面时的网页淡入效果
weixin_30824479的博客
08-23 312
body{ -webkit-animation: bgbody 3s ease; -o-animation: bgbody 3s ease; animation: bgbody 3s ease;}@keyframes bgbody { 0%{ opacity: 0; background-color: #ffffff; } 100%{...
页面的自动跳转特效
10-06
这是javaScript中页面的跳转特效，
html载入画面时淡入,CSS如何在页面加载时创建淡入效果？
weixin_34070493的博客
06-08 673
CSS如何在页面加载时创建淡入效果？下面本篇文章就来给大家介绍一下使用CSS在页面加载时创建淡入效果的方法，希望对大家有所帮助。想要使用CSS在页面加载上创建淡入效果，可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。方法1：使用CSS animation属性通过2个关键帧来定义CSS动画：一个不透明度设置为0，另一个不透明度设置...
用javascript和css实现菜单淡入淡出及滑动效果
m566666的博客
10-25 2044
先写一个HTML文件里面嵌入css代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
首页3秒跳转渐变动画
chentiao9520的博客
07-04 378
ImageView tu1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Win...
点击页面链接，页面渐变白，延时跳转
IT技术宅-北方的刀郎
03-21 1038
function yl(){ var hf = []; $("body").find("a").each(function(i){ hf[i] = $(this).attr("href"); $(this).attr("href","javascript:;"); $(this).bind("click",function(event){ $("#content").anim
[CSS JS] 实现图片自动切换以及淡入淡出动画
最新发布
qq_57232613的博客
03-30 1079
【代码】[CSS JS] 实现图片自动切换以及淡入淡出动画。
网站页面的淡入淡出效果
weixin_34406061的博客
09-19 133
在head部分加入一下内容：<META http-equiv=Page-Enter content=blendTrans(Duration=0.3)><META http-equiv=Page-Exit content=blendTrans(Duration=0.3)> 转载于:https://www.cnblogs.com/godjiahui/archive/200...
html淡化效果,jQuery实现基本淡入淡出效果的方法详解
weixin_31076173的博客
06-03 554
本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考，具体如下：jQuery fadeIn()方法：用于淡入已隐藏的元素jQuery fadeOut()方法：用于淡出可见的元素$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();});});演示带有不同参数的fadeIn()...
html界面切换动画效果图,HTML5多层页面切换显示过渡动画效果
weixin_33278819的博客
06-09 1337
HTML导入代码模板：Arrow Left Your CS success starts here.Hack Reactor's 12-week immersive coding school is accepting applications for onsite and online courses. Apply now and become a software enginee...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值