HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）

最新推荐文章于 2024-06-04 17:36:46 发布
最新推荐文章于 2024-06-04 17:36:46 发布
阅读量4.4w 收藏 83
点赞数 21
分类专栏： HTML5/CSS3 文章标签： css3 html5 动画 移动

两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。
（注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）

下面做了个过渡动画汇总，包含常见的动画效果，效果图如下：
这里写图片描述

点击此处查看运行效果。

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5-页面切换动画</title>
  <link href="animations.css" rel="stylesheet">
  <script src="modernizr.custom.js"></script>
  <script src="jquery-1.8.0.min.js"></script>
  <style>
    #viewsWrapper {
        top:0px;
        left:0px;
        width:300px;
        height:200px;
        position:relative;
        overflow: hidden;
    }

    #view1 {
        background:#dddd00;
    }

    #view2 {
        background:#ff00ff;
    }

    #view3 {
        background:#cc00ff;
    }

    #view4 {
        background:#00cccc;
    }

    .pt-page {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .pt-page-current,
    .no-js .pt-page {
        visibility: visible;
        z-index: 1;
    }
  </style>
  <script>
    //当前页面移动完毕
    var endCurrPage = false;
    //后续页面移动完毕
    var endNextPage = false;
    //入场动画和出场动画
    var outClass = '';
    var inClass = '';

    var animEndEventNames = {
            'WebkitAnimation' : 'webkitAnimationEnd',
            'OAnimation' : 'oAnimationEnd',
            'msAnimation' : 'MSAnimationEnd',
            'animation' : 'animationend'
        },
        // animation end event name
        animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ]

    $(function() {
        //保存各个View的默认class
        $(".pt-page").each( function() {
            var $page = $( this );
            $page.data( 'originalClassList', $page.attr( 'class' ) );
        } );
        //设置默认页面
        $(".pt-page").eq(0).addClass( 'pt-page-current' );

        //添加动画样式单选框
        var str = "";
        for(var i=1;i<=67;i++){
            str += '<input type="radio" name="myAnimation" value="'+i+'" />效果'+i;
            if(i%7==0){
                str += "<br/>";
            }
        }
        $("#radiosDiv").html(str);
    });

    //View切换
    function changeView(newView){
        //设置动画效果   
        var animationType = $('input:radio[name="myAnimation"]:checked:eq(0)').val();
        getAnimationClass(parseInt(animationType));

        $currPage = $(".pt-page-current").eq(0);
        $nextPage = $(newView);

        //清除原来添加的动画，层级等样式
        //(正常动画结束时会自动清除，这样做防止用户在动画结束前就点击切换其他的)
        $(".pt-page").each( function() {
            $(this).attr( 'class', $(this).data( 'originalClassList' ) );
        });
        $currPage.addClass("pt-page-current");
        $nextPage.addClass("pt-page-current");


        //如果就是当页则不切换
        if($currPage.attr("id") == $nextPage.attr("id")){
            return;
        }

        //新页面入场
        $currPage.addClass(outClass).on( animEndEventName, function() {
            $currPage.off( animEndEventName );
            endCurrPage = true;
            if( endNextPage ) {
                onEndAnimation( $currPage, $nextPage );
            }
        } );

        //旧页面出场
        $nextPage.addClass(inClass).on( animEndEventName, function() {
            $nextPage.off( animEndEventName );
            endNextPage = true;
            if( endCurrPage ) {
                onEndAnimation( $currPage, $nextPage );
            }
        } );
    }

    //所有动画都结束后
    function onEndAnimation( $outpage, $inpage ) {
        endCurrPage = false;
        endNextPage = false;
        //resetPage( $outpage, $inpage );
        //isAnimating = false;
        $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
        $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
    }  

    function getAnimationClass(animationType) {
        switch(animationType) {
            case 1:    
                outClass = 'pt-page-moveToLeft';
                inClass = 'pt-page-moveFromRight';
                break;
            case 2:
                outClass = 'pt-page-moveToRight';
                inClass = 'pt-page-moveFromLeft';
                break;
            case 3:
                outClass = 'pt-page-moveToTop';
                inClass = 'pt-page-moveFromBottom';
                break;
            case 4:
                outClass = 'pt-page-moveToBottom';
                inClass = 'pt-page-moveFromTop';
                break;
            case 5:
                outClass = 'pt-page-fade';
                inClass = 'pt-page-moveFromRight pt-page-ontop';
                break;
            case 6:
                outClass = 'pt-page-fade';
                inClass = 'pt-page-moveFromLeft pt-page-ontop';
                break;
            case 7:
                outClass = 'pt-page-fade';
                inClass = 'pt-page-moveFromBottom pt-page-ontop';
                break;
            case 8:
                outClass = 'pt-page-fade';
                inClass = 'pt-page-moveFromTop pt-page-ontop';
                break;
            case 9:
                outClass = 'pt-page-moveToLeftFade';
                inClass = 'pt-page-moveFromRightFade';
                break;
            case 10:
                outClass = 'pt-page-moveToRightFade';
                inClass = 'pt-page-moveFromLeftFade';
                break;
            case 11:
                outClass = 'pt-page-moveToTopFade';
                inClass = 'pt-page-moveFromBottomFade';
                break;
            case 12:
                outClass = 'pt-page-moveToBottomFade';
                inClass = 'pt-page-moveFromTopFade';
                break;
            case 13:
                outClass = 'pt-page-moveToLeftEasing pt-page-ontop';
                inClass = 'pt-page-moveFromRight';
                break;
            case 14:
                outClass = 'pt-page-moveToRightEasing pt-page-ontop';
                inClass = 'pt-page-moveFromLeft';
                break;
            case 15:
                outClass = 'pt-page-moveToTopEasing pt-page-ontop';
                inClass = 'pt-page-moveFromBottom';
                break;
            case 16:
                outClass = 'pt-page-moveToBottomEasing pt-page-ontop';
                inClass = 'pt-page-moveFromTop';
                break;
            case 17:
                outClass = 'pt-page-scaleDown';
                inClass = 'pt-page-moveFromRight pt-page-ontop';
                break;
            case 18:
                outClass = 'pt-page-scaleDown';
                inClass = 'pt-page-moveFromLeft pt-page-ontop';
                break;
            case 19:
                outClass = 'pt-page-scaleDown';
                inClass = 'pt-page-moveFromBottom pt-page-ontop';
                break;
            case 20:
                outClass = 'pt-page-scaleDown';
                inClass = 'pt-page-moveFromTop pt-page-ontop';
                break;
            case 21:
                outClass = 'pt-page-scaleDown';
                inClass = 'pt-page-scaleUpDown pt-page-delay300';
                break;
            case 22:
                outClass = 'pt-page-scaleDownUp';
                inClass = 'pt-page-scaleUp pt-page-delay300';
                break;
            case 23:
                outClass = 'pt-page-moveToLeft pt-page-ontop';
                inClass = 'pt-page-scaleUp';
                break;
            case 24:
                outClass = 'pt-page-moveToRight pt-page-ontop';
                inClass = 'pt-page-scaleUp';
                break;
            case 25:
                outClass = 'pt-page-moveToTop pt-page-ontop';
                inClass = 'pt-page-scaleUp';
                break;
            case 26:
                outClass = 'pt-page-moveToBottom pt-page-ontop';
                inClass = 'pt-page-scaleUp';
                break;
            case 27:
                outClass = 'pt-page-scaleDownCenter';
                inClass = 'pt-page-scaleUpCenter pt-page-delay400';
                break;
            case 28:
                outClass = 'pt-page-rotateRightSideFirst';
                inClass = 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop';
                break;
            case 29:
                outClass = 'pt-page-rotateLeftSideFirst';
                inClass = 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop';
                break;
            case 30:
                outClass = 'pt-page-rotateTopSideFirst';
                inClass = 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop';
                break;
            case 31:
                outClass = 'pt-page-rotateBottomSideFirst';
                inClass = 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop';
                break;
            case 32:
                outClass = 'pt-page-flipOutRight';
                inClass = 'pt-page-flipInLeft pt-page-delay500';
                break;
            case 33:
                outClass = 'pt-page-flipOutLeft';
                inClass = 'pt-page-flipInRight pt-page-delay500';
                break;
            case 34:
                outClass = 'pt-page-flipOutTop';
                inClass = 'pt-page-flipInBottom pt-page-delay500';
                break;
            case 35:
                outClass = 'pt-page-flipOutBottom';
                inClass = 'pt-page-flipInTop pt-page-delay500';
                break;
            case 36:
                outClass = 'pt-page-rotateFall pt-page-ontop';
                inClass = 'pt-page-scaleUp';
                break;
            case 37:
                outClass = 'pt-page-rotateOutNewspaper';
                inClass = 'pt-page-rotateInNewspaper pt-page-delay500';
                break;
            case 38:
                outClass = 'pt-page-rotatePushLeft';
                inClass = 'pt-page-moveFromRight';
                break;
            case 39:
                outClass = 'pt-page-rotatePushRight';
                inClass = 'pt-page-moveFromLeft';
                break;
            case 40:
                outClass = 'pt-page-rotatePushTop';
                inClass = 'pt-page-moveFromBottom';
                break;
            case 41:
                outClass = 'pt-page-rotatePushBottom';
                inClass = 'pt-page-moveFromTop';
                break;
            case 42:
                outClass = 'pt-page-rotatePushLeft';
                inClass = 'pt-page-rotatePullRight pt-page-delay180';
                break;
            case 43:
                outClass = 'pt-page-rotatePushRight';
                inClass = 'pt-page-rotatePullLeft pt-page-delay180';
                break;
            case 44:
                outClass = 'pt-page-rotatePushTop';
                inClass = 'pt-page-rotatePullBottom pt-page-delay180';
                break;
            case 45:
                outClass = 'pt-page-rotatePushBottom';
                inClass = 'pt-page-rotatePullTop pt-page-delay180';
                break;
            case 46:
                outClass = 'pt-page-rotateFoldLeft';
                inClass = 'pt-page-moveFromRightFade';
                break;
            case 47:
                outClass = 'pt-page-rotateFoldRight';
                inClass = 'pt-page-moveFromLeftFade';
                break;
            case 48:
                outClass = 'pt-page-rotateFoldTop';
                inClass = 'pt-page-moveFromBottomFade';
                break;
            case 49:
                outClass = 'pt-page-rotateFoldBottom';
                inClass = 'pt-page-moveFromTopFade';
                break;
            case 50:
                outClass = 'pt-page-moveToRightFade';
                inClass = 'pt-page-rotateUnfoldLeft';
                break;
            case 51:
                outClass = 'pt-page-moveToLeftFade';
                inClass = 'pt-page-rotateUnfoldRight';
                break;
            case 52:
                outClass = 'pt-page-moveToBottomFade';
                inClass = 'pt-page-rotateUnfoldTop';
                break;
            case 53:
                outClass = 'pt-page-moveToTopFade';
                inClass = 'pt-page-rotateUnfoldBottom';
                break;
            case 54:
                outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
                inClass = 'pt-page-rotateRoomLeftIn';
                break;
            case 55:
                outClass = 'pt-page-rotateRoomRightOut pt-page-ontop';
                inClass = 'pt-page-rotateRoomRightIn';
                break;
            case 56:
                outClass = 'pt-page-rotateRoomTopOut pt-page-ontop';
                inClass = 'pt-page-rotateRoomTopIn';
                break;
            case 57:
                outClass = 'pt-page-rotateRoomBottomOut pt-page-ontop';
                inClass = 'pt-page-rotateRoomBottomIn';
                break;
            case 58:
                outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
                inClass = 'pt-page-rotateCubeLeftIn';
                break;
            case 59:
                outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
                inClass = 'pt-page-rotateCubeRightIn';
                break;
            case 60:
                outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
                inClass = 'pt-page-rotateCubeTopIn';
                break;
            case 61:
                outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
                inClass = 'pt-page-rotateCubeBottomIn';
                break;
            case 62:
                outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop';
                inClass = 'pt-page-rotateCarouselLeftIn';
                break;
            case 63:
                outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop';
                inClass = 'pt-page-rotateCarouselRightIn';
                break;
            case 64:
                outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop';
                inClass = 'pt-page-rotateCarouselTopIn';
                break;
            case 65:
                outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop';
                inClass = 'pt-page-rotateCarouselBottomIn';
                break;
            case 66:
                outClass = 'pt-page-rotateSidesOut';
                inClass = 'pt-page-rotateSidesIn pt-page-delay200';
                break;
            case 67:
                outClass = 'pt-page-rotateSlideOut';
                inClass = 'pt-page-rotateSlideIn';
                break;
        }
    }
  </script>
</head>
<body>
    <div id="viewsWrapper">
        <div id="view1" class="pt-page">这个是页面1......</div>
        <div id="view2" class="pt-page">这个是页面2......</div>
        <div id="view3" class="pt-page">这个是页面3......</div>
        <div id="view4" class="pt-page">这个是页面4......</div>
    </div>
    <br/>
    <input type="button" onclick="changeView('#view1')" value="切换页面1"/>
    <input type="button" onclick="changeView('#view2')" value="切换页面2"/>
    <input type="button" onclick="changeView('#view3')" value="切换页面3"/>
    <input type="button" onclick="changeView('#view4')" value="切换页面4"/>
    <br/>
    <br/>
    <div id="radiosDiv"></div>
</body>
</html>

源码下载：场景切换.zip

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_829.html

u014063717
关注
  • 21
    点赞
  • 踩
  • 83
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS3卡通城市动画场景切换特效特效代码
03-20
【CSS3卡通城市动画场景切换特效】是一种利用现代Web技术为网页添加生动有趣视觉效果的方法。这个特效结合了CSS3的强大力量和jQuery库，为用户呈现出一个卡通风格的城市建筑场景，通过平滑的动画过渡实现场景间的...
CSS3使用过渡转换和动画实现3D旋转盒子
王飞
01-08 1250
在网络快速发展的今天，静态web页面早已经不满足人们的需求，因此我们需要更加炫酷的动画渲染页面，使得我们的页面逼格满满，在css3中动画的表现形式有过渡，2d动画和3d动画，给用户一种耳目一新的全新体验。 过渡（transition） 个人理解的过渡指的是某种元素的某种状态在一定的时间段内发生的变化叫做过渡。 div:hover{ width: 200px; height: 200px; } ...
火车票飞机票，点击切换按钮切换出发城市和到达城市
Hero_rong的博客
11-08 1399
如图，点击中间的切换图标，切换左右两边的城市，并且带有动画效果   只要利用css的特性transition和js的方法toggleClass就可以啦，具体操作如下： &lt;div class="con"&gt; &lt;div class="choose-city"&gt; &lt;div class="leave"&gt; &l
CSS实现渐隐渐现效果
最新发布
Runnymmede的博客
06-04 1173
实现渐隐渐现效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素消失时具有平滑的效果。
vue实现轮播图 （淡入淡出效果 无插件）
2301_78767322的博客
08-02 480
使用vue做轮播图，不使用插件，纯原生。
用javascript实现轮播图淡入淡出效果
夏天的博客
02-02 1899
本篇实现的是轮播图淡入淡出的效果，思路是利用图片的层级替换实现的，运用了屏幕的自适应属性。 1.HTML代码 <div class="swiper-container"> <div class="swiper-wrapper"> <img src="../image/1.jpg" alt=""> <img src="../image/2.jpg" alt=""> .
js实现轮播图（淡入淡出效果）
A20201130的博客
01-20 3986
目录 一、前言 二、轮播图实现效果 三、功能 四、实现代码 1.html+css部分代码 2.js主要代码 5、总结 一、前言 说起轮播图，大家应该都不陌生，大部分网站的首页或者也是面试官的提问：你会写轮播图吗？都会见到它的存在。虽然实现起来也不是很困难，但是真正能写好的人也不多，这也是我写这个的原因，整理一下自己写的东西，也带着大家一起复习巩固。 二、轮播图实现效果 三、功能 1.实现自动播放 2.鼠标移入停止播放，按左右切换按钮或者点击分页器小圆点切换图片 3.图片实现.
整理下2个div的动态切换
liuyuemozhu的博客
09-19 848
首先展示实现效果： 点击 “其他格式” 的时候动态切换两个div的显示状态： 实现需求： 两个div，一个div默认状态下是显示状态，另一个div是隐藏状态，当点击“其他格式”的时候，动态切换两个div的显示状态。 实现代码： HTML： CSS： 原生javascript： 具体看js的实现思路就可以了。 代码只是自己思想逻辑的一种具象体现，开始做的时候，还是没...
jQ+css3注册步骤动画效果 jQuery+css3注册步骤动画效果网页特效.zip
11-19
在这个特效中，CSS3被用来实现步骤指示器的状态变化、表单元素的淡入淡出效果，以及可能的背景颜色或边框动画。例如，使用`transition`属性可以定义当元素的某个属性改变时如何平滑过渡；使用`animation`属性可以...
css动画 - 把你喜欢css动画嵌入到浏览器中
06-01
可以通过CSS精灵图（CSS Sprites）和transform的translateX、translateY属性来实现角色的移动，或者使用CSS的scale属性调整大小，配合opacity属性实现淡入淡出效果，让海绵宝宝在页面上生动起来。 五、个人明信片 ...
html5+css3技术实现3D网页内容上下左右四个方向滚动切换特效.zip
11-03
- **Animations**：CSS3动画可以创建更复杂的动态效果，如3D旋转、淡入淡出等，可能用于增强3D滚动体验。 - **Perspective属性**：设置透视效果，用于模拟3D空间，使得元素随着距离视口远近而产生大小变化，增加...
HTML5+CSS3房屋装饰工具 移动鼠标3D动画查看
06-11
这个应用充分展示了HTML5的Canvas、SVG或WebGL等特性以及CSS3的3D转换、动画效果。 首先，HTML5的Canvas元素是此工具的基础，它允许开发者在网页上绘制2D图形。在这个应用中，Canvas用于渲染3D场景，通过JavaScript...
css3各种动画效果合集（二）
qq_53541336的博客
09-20 311
【代码】css各种动画合集（二）
html5换场效果图,场景转场动画的Canvas实现
weixin_32273747的博客
06-05 1060
废话不说，先上图图1：转场前图2：转场中(动画效果此处请看末尾链接)图3：转场后看完效果，我们来讲讲原理。首先我们需要准备一张转场用的图。理论上所有图片都可以作为过渡图使用。我使用的是一张带有天使翅膀图案的图片作为过渡图。首先，将过渡图黑白化。var pixs = context.getImageData(0, 0, context.Canvas.width, context.Canvas.hei...
css实现大屏模块动画切换效果
自由&不束缚的博客
05-25 1238
偶然间在网上看到一个小demo，效果看起来挺好的，就写篇文章记录一下，方便后续项目开发 效果如下 详细代码如下 <template> <div class="container"> <div class="item-box"> <div class="item" @click="clickChart('1')" style="transform: translate(-22.4%, -33.5%) scale(0.33)">1<
html中飞入动画怎么写,js+css3多彩文字飞入飞出动画特效
weixin_35797900的博客
05-31 1235
一款简单好看的js+css3多彩文字飞入飞出动画特效，一个个文字动画飞出组合成一条句子，每个文字的颜色随机，然后文字飞出消失。查看演示下载资源：19次 下载资源下载积分：10积分js代码 function _(x) {return document.querySelectorAll(x);}function r(min=0,max=0) ...
html+div+动画效果,div交换css动画效果
weixin_39890708的博客
06-03 185
Document.my-container {margin: auto 0;padding: 10px;}.my-container>div:first-child {background:#c0cbff;margin: auto 0;padding: 10px;height: 130px;}.my-container>div:last-child {background: pink;m...
vue2 transition 组件 搭配 animate.css 简易实现组件切换动画效果
TangAcrab的博客
11-22 987
vue2 transition 组件 搭配 animate.css 简易实现组件切换动画效果
Vue3 Transition组件给页面切换加动画效果
前端咸鱼翻身的博客
05-05 9926
使用Vue3自带的Transition组件给页面组件之间切换加过渡效果，主要应用在移动端设备，改善用户的交互体验。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值