`

发射小鸟动画特效

CSS常见特效 
阅读更多

发射小鸟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        /*CSS源代码*/
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        a{
            text-decoration:none;
        }
        a:link{color:green;}
        a:visited{color:green;}
        a:hover{color:green;}
        .svg-path {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .cloud {
            position: absolute;
            z-index: 90;
            display: none;
            left: 120%;
        }

        .title {
            width: 100%;
            position: absolute;
            top: 70%;
            z-index: 1;
            font-family: Arial;
            text-align: center;
            font-size: 45px;
            color: #00ADE6;
        }
        .title span {
            display: inline-block;
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .title span:nth-child(2) {
            opacity: 0;
            transform: translate3d(0, 80%, 0);
        }
        .title.pressed span:nth-child(1) {
            opacity: 0;
            transform: translate3d(0, -80%, 0);
        }
        h1.pressed span:nth-child(2) {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        #box {
            cursor: pointer;
        }


        /* TWITTER BIRD ANIMATION */

        .animation {
            background-image: url(http://twin-dev.net/experiments/codevember/maki/ressources/twitter-transparent.png);
            height: 110px; /* width and height of each frame */
            width: 150px;
            position: absolute;
            z-index: 100;
            left: 50%;
            top: 10%;
            transform: translate(-50%, -10%);
        }

        .animationBird {
            -webkit-animation: sprite-animation .6s steps(12,end) 8.5; /* steps = number of frames */
            animation: sprite-animation .6s steps(12,end) 8.5;
        }

        @-webkit-keyframes sprite-animation { /* Safari & Chrome */
            from { background-position: 0 0; }
            to { background-position: -1800px 0; } /* negative of sprite sheet width */
        }
        @keyframes sprite-animation {
            from { background-position: 0 0; }
            to { background-position: -1800px 0; } /* negative of sprite sheet width */
        }

        /* CLOUD ANIMATION */

        .animationCloud {
            -webkit-animation: cloud-animation 5s linear;
            animation: cloud-animation 5s linear;
        }

        @-webkit-keyframes cloud-animation { /* Safari & Chrome */
            0% {
                left: 120%;
            }

            100% {
                left: -25%;
            }
        }

        @keyframes cloud-animation {
            0% {
                left: 120%;
            }

            100% {
                left: -25%;
            }
        }

        .Signature {
            position: absolute;
            z-index: 100;
            bottom: 20px;
            right: 20px;
            color: #00ADE6;
            line-height: .2;
            font-size: .7em;
            font-family: Open Sans, sans-serif;
        }

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div class="animation"></div>

<img src="http://twin-dev.net/experiments/codevember/maki/ressources/white-cloud.png" class="cloud">

<h1 id="title" class="title"><span>press</span><span>release</span></h1>

<svg viewbox="0 0 100 200" id="svg"  preserveAspectRatio="none" class="svg-path">
    <path id="box" d="M0,0 H100 V100 Q50,200 0,100" fill="#00ADE6">
</svg>

<aside class="Signature">
    <p><a href="http://www.gbtags.com">极客标签gbtags.com</a></p>
</aside>


<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dynamics.js/0.0.7/dynamics.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
<script>
    /*Javascript代码片段*/
    $( document ).ready(function() {

        var path = document.getElementById('box');
        var title = document.getElementById('title');

        var spring = .9;
        var friction = .8;
        var easing = .1;

        var sy = 200;
        var dy = 100;
        var vy = 0;
        var released = true;

        requestAnimationFrame(function update(){
            requestAnimationFrame(update);

            if (released) {
                vy += (dy - sy) * spring;
                sy += (vy *= friction);
            } else {
                sy += (dy - sy) * easing;
            }

            path.setAttribute('d', 'M0,0 H100 V100 Q50,' + sy + ' 0,100');
        });


        var clicking = false;

        document.addEventListener('mousedown', function(){
            released = false;
            dy = 200;
            $(".animation").animate({
                top: "40%"
            }, 200);

            title.classList.add('pressed');
        });

        document.addEventListener('mouseup', function(){

            $(".animation").animate({
                top: "10%"
            });
            $(".animation").addClass("animationBird");
            $(".cloud").show().addClass("animationCloud");

            setTimeout(releaseHeader, 600);

            title.classList.remove('pressed');
        });


        function releaseHeader() {
            released = true;
            dy = 100;

            setTimeout(removeClass, 4500);
        }

        function removeClass() {
            $(".animation").removeClass("animationBird");
            $(".cloud").removeClass("animationCloud");
        }

    });

</script>


</body>
</html>

 

 

 

 

 

.

分享到：
| 详解PHP的执行原理和流程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    unity愤怒的小鸟素材（含源码）

    在“愤怒的小鸟”中，小鸟发射、击中目标或猪堡倒塌时的特效就是通过粒子系统实现的。 六、声音和音乐 Unity支持音频播放，包括背景音乐和音效。在愤怒的小鸟中，每次操作都会有相应的音效，提升了游戏的沉浸感。...

    Unity 3D愤怒的小鸟源码.zip

    在愤怒的小鸟源码中，我们可以看到不同状态下的小鸟动画，如发射前的准备、飞行过程、撞击后的效果等。这些动画由一系列的关键帧构成，通过Animator控制器进行管理。 五、UI系统 Unity的UI系统（UI System）用于...

    愤怒的小鸟(angrybirds) unity项目

    Unity支持导入和播放各种音频格式，同时，粒子系统可以创建丰富的特效，如小鸟发射时的尾迹、猪堡爆炸的碎片飞溅等。 通过分析和实践这个项目，开发者不仅可以掌握Unity的基本操作，还能深入了解游戏开发中的物理...

    基于html5实现的愤怒的小鸟网页游戏特效源码.zip

    在愤怒的小鸟游戏中，发射小鸟的音效、碰撞的反馈声，都是通过Web Audio API实现的。 3. Local Storage：HTML5的Local Storage使得游戏数据可以在用户浏览器中持久化存储，例如玩家的分数、游戏进度等。这允许玩家...

    android基于开源游戏引擎jbox2d开发的高仿愤怒的小鸟游戏源码.rar

    开发者需通过JBox2D的applyForce或applyImpulse方法，模拟出弹弓发射小鸟的效果。同时，还需要考虑重力、风阻等因素对小鸟飞行轨迹的影响。 六、图形渲染 游戏画面的呈现通常采用OpenGL ES或者Android的Canvas进行...

    基于jbox2d的仿愤怒的小鸟游戏

    在“愤怒的小鸟”中，玩家通过拖动弹弓来发射小鸟。实现这一功能需要监听用户的输入，计算出小鸟的发射角度和速度，并将这些参数转化为对jBox2D世界的力应用。jBox2D允许我们为物体添加力，模拟弹弓的拉伸和释放。 ...

    愤怒的小鸟，包含实现具体文档

    3. 用户交互：玩家通过触摸屏幕控制弹弓发射小鸟。在Cocos2D中，我们可以监听触摸事件，根据用户手势计算发射力度和角度。 4. 动画与特效：游戏中的小鸟飞行、碰撞等都有相应的动画效果。Cocos2D提供了动作类，如...

    Angry bird （愤怒的小鸟） 里面的素材

    愤怒的小鸟采用了基于真实物理的模拟系统，允许玩家通过弹弓发射小鸟，根据抛物线轨迹撞击结构，摧毁猪堡。这种模拟需要精确的计算，包括重力、速度、角度和碰撞检测。物理引擎如Box2D或Bullet在游戏开发中广泛应用...

    愤怒的小鸟源码

    4. **动画与用户交互**：游戏中的动画效果，如小鸟的飞行、爆炸特效等，是通过帧动画或者序列化动作来实现的。同时，源码还会揭示如何处理用户的触摸输入，实现弹弓拉伸、释放等操作。 5. **声音与音效**：《愤怒的...

    Box2d应用—愤怒的小鸟

    3. **增强互动性**：改进小鸟的发射机制，允许玩家调整发射角度和力度，增加游戏策略性。 4. **视觉反馈**：添加碰撞特效和声音反馈，提高游戏沉浸感。 5. **智能AI**：为猪堡或障碍物设计简单的AI，增加游戏挑战性...

    游戏UI 愤怒的小鸟星战版

    在《愤怒的小鸟星战版》中，操作界面需要展示小鸟的发射角度、力度调整以及目标信息。这些元素的设计要直观易懂，同时也要符合星战主题，例如，可能用原力图标表示拉力，用激光炮的轨迹表示射击路径。 再者，游戏...

    Unity 愤怒的小鸟 游戏工程项目 亲测好用

    小鸟发射、飞行、碰撞等动作都需要相应的动画支持。开发者需理解状态机的工作原理，创建和配置动画状态。 6. **碰撞检测与触发器** 利用Unity的Collider和Trigger组件，可以实现游戏中的碰撞检测。例如，小鸟和猪...

    愤怒的小鸟unity-编程--视频教程

    了解粒子系统，添加视觉特效，如小鸟发射时的尾烟或破坏效果。 9. **场景管理**：学习如何使用SceneManager来管理游戏的不同阶段，如加载和切换关卡。 10. **优化与发布**：了解性能优化技巧，如降低多边形数、...

    愤怒的小鸟Unity3d

    5. **动画系统**：Unity3D的动画系统允许开发者创建和控制游戏角色和物体的动画，如小鸟飞行、碰撞后的反应等。 6. **UI系统**：创建用户界面，如菜单、计分板、关卡选择等，使用Unity的UI组件如Canvas、Text、...

    愤怒小鸟网页代码.pdf

    愤怒的小鸟是一款深受玩家喜爱的休闲游戏，它的核心玩法是利用弹弓将各种不同特性的鸟类发射出去，目的是摧毁由猪头守卫的建筑物，救回被抢走的鸟蛋。游戏中有多种不同颜色的小鸟，每种都有独特的特性： 1. 红色小鸟...

    Html5交互动画小游戏 豹子抓小鸟.zip

    比如，豹子和小鸟在被点击时可能会有动画效果，或者火球击中后会有爆炸特效。 关于用户交互，HTML5的事件处理机制使得豹子能响应用户的点击，同时游戏可以根据用户的操作做出反应，如判断是否吃到小鸟或躲避火球，...

    cocos-2d愤怒的小鸟1

    6. **游戏逻辑**：理解如何编写游戏逻辑代码，包括小鸟发射、目标物的碰撞计算、得分系统的设计等。 7. **动画制作**：通过cocos-2d的动画接口，学习如何制作各种动态效果，如角色动作、爆炸特效等。 8. **音频...

Magicbox
Global site tag (gtag.js) - Google Analytics