搜索

css如何实现两个页面之间的过渡动画效果代码?

html5 css

css如何实现两个页面之间的过渡动画效果代码？

网友回复

对于chrome Firefox等现代浏览器我们在每个html页面中定义打开和即将跳转的动画，然后实现跳转，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        body {
          background-color: #eee;
        }
        
        .wrapper {
          height: 100vh;
          text-align: center;
        }
        .wrapper button {
          position: relative;
          top: 50%;
          transform: translateY(-50%);
        }
        
        .loader {
          position: fixed;
          z-index: 999;
          top: 0;
          left: 0;
          width: 0;
          height: 100vh;
          transition: width 0s 1.4s ease;
        }
        .loader .loader__icon {
          position: absolute;
          z-index: 1;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          opacity: 0;
          transition: opacity 0.5s ease;
        }
        .loader .loader__icon svg {
          transform-origin: 0 0;
        }
        .loader .loader__tile {
          position: absolute;
          left: 0;
          width: 0;
          height: 20%;
          background-color: #007AE5;
          transition: width 0.7s ease;
        }
        .loader .loader__tile:nth-child(0) {
          top: calc(-1 * 20%);
          transition-delay: -0.2s;
        }
        .loader .loader__tile:nth-child(1) {
          top: calc(0 * 20%);
          transition-delay: 0s;
        }
        .loader .loader__tile:nth-child(2) {
          top: calc(1 * 20%);
          transition-delay: 0.2s;
        }
        .loader .loader__tile:nth-child(3) {
          top: calc(2 * 20%);
          transition-delay: 0.4s;
        }
        .loader .loader__tile:nth-child(4) {
          top: calc(3 * 20%);
          transition-delay: 0.6s;
        }
        .loader .loader__tile:nth-child(5) {
          top: calc(4 * 20%);
          transition-delay: 0.8s;
        }
        .loader--active {
          width: 100%;
          transition-delay: 0s;
        }
        .loader--active .loader__icon {
          opacity: 1;
          transition: opacity 0.5s 1.4s ease;
        }
        .loader--active .loader__tile {
          width: 100%;
        }
        .loader--active .loader__tile:nth-child(0) {
          transition-delay: -0.2s;
        }
        .loader--active .loader__tile:nth-child(1) {
          transition-delay: 0s;
        }
        .loader--active .loader__tile:nth-child(2) {
          transition-delay: 0.2s;
        }
        .loader--active .loader__tile:nth-child(3) {
          transition-delay: 0.4s;
        }
        .loader--active .loader__tile:nth-child(4) {
          transition-delay: 0.6s;
        }
        .loader--active .loader__tile:nth-child(5) {
          transition-delay: 0.8s;
        }
    </style>



</head>

<body translate="no">
    <div class="loader loader--active">
        <div class="loader__icon">
            <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
      <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
      <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32,8.481,24.301,9.057,26.013,10.047z"></path>
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
    </svg>
        </div>
        <div class="loader__tile"></div>
        <div class="loader__tile"></div>
        <div class="loader__tile"></div>
        <div class="loader__tile"></div>
        <div class="loader__tile"></div>
    </div>
    <div class="wrapper">
        <button class="btn" type="button">Toggle page transition</button>
        
    </div>


    <script>
        var $loader = document.querySelector('.loader');
        
        window.onload = function () {
          $loader.classList.remove('loader--active');
        };
        
        document.querySelector('.btn').addEventListener('click', function () {
          $loader.classList.add('loader--active');
          //模拟页面跳转
          window.setTimeout(function () {
            
              var openurl = window.location.href;
              location.href=openurl;
            //$loader.classList.remove('loader--active');
          }, 5000);
        });
    </script>



</body>

</html>

对于ie浏览器可以使用添加meta http-equiv来设置页面的过渡动画。当我们需要添加过渡效果时，只需在<head>中添加一个特殊的<meta>即可，比如： <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" /> http-equiv 作用很多,这里的值为 Page-Enter 是指在页面进入的时候发生,其他值还有: Page-Enter : 进入页面 Page-Exit : 离开页面 Site-Enter : 进入网站 Site-Exit : 离开网站 content 当然就是内容咯,这里表示页面过渡的效果设置,这里的两个属性表示分别表示 Duration : 过渡速度 Transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式具体数值介绍: 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=2.0)" /> 盒状收缩 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=0)" /> 盒状展开 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=1)" /> 圆形收缩 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=2)" /> 圆形放射 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=3)" /> 向上擦除 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=4)" /> 向下擦除 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=5)" /> 向右擦除 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=6)" /> 向左擦除 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=7)" /> 垂直遮蔽 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=8)" /> 水平遮蔽 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=9)" /> 横向棋盘式 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=10)" /> 纵向棋盘式 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=11)" /> 随机溶解 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" /> 左右向中央缩进 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=13)" /> 中央向左右扩展 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=14)" /> 上下向中央缩进 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=15)" /> 中央向上下扩展 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=16)" /> 从左下抽出 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=17)" /> 从左上抽出 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=18)" /> 从右下抽出 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=19)" /> 从右上抽出 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=20)" /> 随机水平线条 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=21)" /> 随机垂直线条 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=22)" /> 随机 <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=23)" /> 其他过渡效果: Blinds（百叶窗） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)" /> 属性 : bands (default=10), Direction (default="down"), Duration ( no default) Barn（扫除） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)" /> 属性 : duration, motion, orientation (default="vertical") CheckerBoard（无数小格） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)" /> 属性: Direction (default="right"), squaresX (default=12), squaresY (default=10) Fade（淡入淡出） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)" /> 属性: duration, overlap (default=1.0) GradientWipe（渐变扫除） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)" /> 属性: duration, gradientSize (default=0.25), motion Inset（从一角扩散） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)" /> 属性: duration Iris（十字扩散） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)" /> 属性: duration, irisStyle (default="PLUS"), motion Pixelate（震动出来） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)" /> 属性: duration, maxSquare (default=25) RadialWipe（螺旋扩展） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)" /> 属性: duration, wipeStyle (default="CLOCK") RandomBars（线条遮罩） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)" /> 属性 : duration, orientation (default="horizontal") RandomDissolve（像素遮罩） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)" /> 属性: duration Slide（拉幕） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)" /> 属性 : bands (default=1), duration, slideStyle (default="SLIDE") Spiral（向心旋转） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)" /> 属性: duration, gridSizeX (default=16), gridSizeY (default=16) Stretch（两边开幕效果） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)" /> 属性 : duration, stretchStyle (default="SPIN") Strips（一角锯齿开幕） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)" /> 属性: duration, motion Wheel（十字旋转开幕） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)" /> 属性 : duration, spokes (default=4) ZigZag（Z字形展开） <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)" /> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)" /> 属性 : duration, gridSizeX, gridSizeY

参考：https://blog.csdn.net/luweiyuan01/article/details/7708652

by thinkfuture

我知道答案，我要回答

我有问题

私活外包

css如何实现两个页面之间的过渡动画效果代码?

私有ai助理开发

类似如家的租房app开发

h5手机端考试网站开发

开发一个短剧解锁剧集的小程序

我要开发一个酒类拍卖交易平台

开发艺术品拍卖收藏买画卖画h5网站

帮我做个数字货币交易所网站

盲盒游戏开发

帮我们优化架构应对秒杀

找一个兼职产品经理与客户沟通绘制原型

ollama如何运行中文友好微调版本的llama3？

llama3如何做成类似coze和百度一样的智能体？

llama3如何量化得更小一点？

ngrok edges与endpoints有啥区别？

如何查看同一个ip下绑定的所有域名？

如何使用ngrok让外网用户可以访问局域网内的web服务器？

bootstrap如何实现pc端同一行中无数个卡片自适应不换行，移动端每个卡片一行一个排列？

如何在ollama中使用类似openai的Function call函数调用功能接口？

如何为自己的coze bot开发coze插件?

php如何调用扣子coze触发器webhook事件触发？