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

最新推荐文章于 2021-06-08 22:34:11 发布
最新推荐文章于 2021-06-08 22:34:11 发布
阅读量3.1k 收藏 3
点赞数 2
分类专栏： web 文章标签： transition
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hou_yongkui/article/details/6461042
版权

在需要淡入淡出的页面的<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)"/>

 

lori
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web入门：JQuery淡入淡出面板
小院里的霍大侠
12-14 245
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
移动端切屏动画-切换页面展开时上个页面渐变消失当前页面出现
weixin_43294560的博客
06-19 555
做法: a标签+target伪类,a标签的id绑定页面元素的id,初始元素在屏幕外, 使用target伪类当点击超链接时添加移动样式,并会显示对应target元素的内容 代码示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./index.css"> &
jQuery实现淡入淡出效果
12-15
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
网页淡入淡出效果（转载）
weixin_30848775的博客
05-24 301
网页的淡入淡出效果会让博客尤其是个人博客显的更加美观和个性，而这种效果的实现其实非常简单，只要将下面这两行代码 放入页面的head部分就可以了 <Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)"> <Meta http-equiv="Page-Exit" Conte...
网页淡入淡出效果实践
iteye_130的博客
11-23 267
今天看到有个网站采用了淡入淡出效果，感觉挺酷的，所以就自己也做了一个小DEMO,下面是源代码。 page1.html: [code="html"] 网页淡入淡出效果演示 网页一 跳转到网页二 网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示 网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效...
vue项目（基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子）
06-21
搭建的简单地vue框架的例子，带有基本的请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss。以后会逐步完善，整合一些公共的方法、组件等等
vue路由切换之淡入淡出的简单实现
12-30
路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计 想让路由有过渡动画，需要在标签的...
WPF页面淡出淡入切换效果
09-04
在Windows Presentation Foundation (WPF) 中，开发人员可以利用丰富的动画功能来实现各种炫酷的用户界面效果，其中就包括页面之间的淡出淡入切换。这种效果能够为应用程序增添流畅和专业的视觉体验，提高用户的交互...
jquery淡出淡入广告图片切换代码
04-08
1. **jQuery淡入淡出效果**：jQuery库提供了`.fadeIn()`和`.fadeOut()`方法，可以实现元素的平滑淡入和淡出效果。在这个广告图片切换代码中，这些方法被用来在图片之间无缝过渡，为用户创造流畅的视觉体验。通过调整...
安卓欢迎页面淡入淡出
04-29
实现这种淡入淡出效果主要涉及到安卓的动画框架，包括属性动画（Property Animation）和视图动画（View Animation）。属性动画系统是Android 3.0（API level 11）及更高版本引入的，它允许对对象的属性进行连续的...
页面的自动跳转特效
10-06
这是javaScript中页面的跳转特效，
特效代码:弹出一个淡入淡出的提示框
08-06
特效代码:弹出一个淡入淡出的提示框特效代码:弹出一个淡入淡出的提示框
网页图片淡入淡出
09-01
网页图片淡入淡出是一种常见的网页视觉效果，它使得网页上的图片在切换时不是...以上就是实现网页图片淡入淡出效果所涉及的主要技术和知识点。通过合理运用这些技术，我们可以创建出用户体验优秀的网页图片展示模块。
CSS3实现加载页面时的网页淡入效果
weixin_30824479的博客
08-23 268
body{ -webkit-animation: bgbody 3s ease; -o-animation: bgbody 3s ease; animation: bgbody 3s ease;}@keyframes bgbody { 0%{ opacity: 0; background-color: #ffffff; } 100%{...
html载入画面时淡入,CSS如何在页面加载时创建淡入效果？
weixin_34070493的博客
06-08 559
CSS如何在页面加载时创建淡入效果？下面本篇文章就来给大家介绍一下使用CSS在页面加载时创建淡入效果的方法，希望对大家有所帮助。想要使用CSS在页面加载上创建淡入效果，可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。方法1：使用CSS animation属性通过2个关键帧来定义CSS动画：一个不透明度设置为0，另一个不透明度设置...
首页3秒跳转渐变动画
chentiao9520的博客
07-04 326
ImageView tu1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Win...
点击页面链接，页面渐变白，延时跳转
IT技术宅-北方的刀郎
03-21 911
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
网站页面的淡入淡出效果
weixin_34406061的博客
09-19 97
在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 485
本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考，具体如下：jQuery fadeIn()方法：用于淡入已隐藏的元素jQuery fadeOut()方法：用于淡出可见的元素$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();});});演示带有不同参数的fadeIn()...
微信小程序淡入淡出页面切换效果
最新发布
03-26
这样，在跳转页面时，只需在跳转函数中调用相应的fadeIn和fadeOut函数即可实现淡入淡出效果。 为了获得更好的效果，此处还可以添加一个小小的优化： ``` onReady: function () { setTimeout(() => { this....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值