精华内容
下载资源
问答
  • Android属性动画功能实现:博客地址:https://blog.csdn.net/dreams_deng/article/details/104848523
  • 制作环保宣传动画人物形象 教学班级 北大青鸟 高二 1班 授课时间 2014 年 11 月 12 日 执 教 人 黄光宇 教学内容 综合案例环保宣传动画人物形象 教学方法 讲述法引导法实例法练习法 教学目的 1加强 flash 基础工具的...
  • CSS动画分为两个步骤: 1.先定义动画 2.再调用动画 语法如下 1.定义: @keyframs 动画名称 { from(0%){} to(100%){} ...案例效果图 注意的点: 在这里插入/* 保证子级在父级水平垂直居中 */ posi

    CSS动画分为两个步骤:
    1.先定义动画
    2.再调用动画
    语法如下
    1.定义:

    @keyframs 动画名称 {
    	from(0%){}
    	to(100%){}
    	}
    

    这里的数字可以从0%~100% 可以任意 代表 :动画开始~动画结束
    2.使用

    div {
    animation-name:动画名称(与上面的对应);
    animation-duiation:持续时间;
    }
    

    animation还有其他属性 可自己查表
    案例效果图
    在这里插入图片描述
    注意的点:

    在这里插入/* 保证子级在父级水平垂直居中 */
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				transform: translate(-50%,-50%);代码片
    

    各选择器叠加的权重问题

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.map {
    				position: relative;
    				width: 747px;
    				height: 617px;
    				background:url(./素材/dt.png) no-repeat;
    				background-color: black;
    				margin: 0 auto;
    			}
    			.beijing {
    				position: absolute;
    				top: 228px;
    				right: 191px;
    			
    			}
    			.taibei {
    				position: absolute;
    				top: 499px;
    				right: 81px;
    			}
    			
    			.guangzhou {
    				position: absolute;
    				top: 542px;
    				right: 193px;
    				}
    			.dotted {
    				width: 8px;
    				height: 8px;
    				/* 不是color */
    				background-color: #09f;
    				border-radius: 50%;
    			}
    			.beijing div[class^="pulse"],
    			.taibei div[class^="pulse"],
    			.guangzhou [class^="pulse"]{
    				/* 保证子级在父级水平垂直居中 */
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				transform: translate(-50%,-50%);
    				width: 8px;
    				height: 8px;
    				box-shadow: 0 0 12px #09f;
    				border-radius: 50%;	
    				animation: pulse 1.2s linear infinite ;
    			}
    			.beijing div.pulse2,
    			.taibei div.pulse3,
    			.guangzhou div.pulse3{
    				animation-delay: 0.4s;
    			}
    			.beijing div.pulse3,
    			.taibei div.pulse3,
    			.guangzhou div.pulse3{
    				animation-delay: 0.8s;
    			}
    			@keyframes pulse{
    				0%{}
    				70%{
    					width: 40px;
    					height: 40px;
    					opacity: 1;
    				}
    				100%{
    					width: 70px;
    					height: 70px;
    					opacity: 0;
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<div class="map">
    			<div class="beijing">
    				<div class="dotted"></div>
    				<div class="pulse1"></div>
    				<div class="pulse2"></div>
    				<div class="pulse3"></div>
    			</div>
    			<div class="taibei">
    				<div class="dotted"></div>
    				<div class="pulse1"></div>
    				<div class="pulse2"></div>
    				<div class="pulse3"></div>
    			</div>
    			<div class="guangzhou">
    				<div class="dotted"></div>
    				<div class="pulse1"></div>
    				<div class="pulse2"></div>
    				<div class="pulse3"></div>
    			</div>
    		</div>
    			
    		
    	</body>
    </html>
    

    素材
    在这里插入图片描述

    展开全文
  • 动画(animation)是CSS3中具有颠覆性特征之一,可通过设置多个节点来精准控制一个或一组动画,常用来实现复杂的风化效果。 相比较过渡,动画可以实现更多变化、更多控制、连续播放等效果。 一、动画的基本使用 ...

    动画(animation)是CSS3中具有颠覆性特征之一,可通过设置多个节点来精准控制一个或一组动画,常用来实现复杂的风化效果。

    相比较过渡,动画可以实现更多变化、更多控制、连续播放等效果。

    一、动画的基本使用

    制作动画分为两部:

    1. 先定义动画
    2. 再使用(调用)动画

    1. 用keyframes定义动画(类似定义类选择器)

    @keyframes 动画名称 {
        0% {
            width: 100px;
        }
        100% {
            width: 200px;
        }
    }

    动画序列:

    • 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列
    • @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
    • 动画是使某元素从一种样式逐渐变化为另一种样式的效果,可以任意次数地改变成任意样式
    • 用百分比来规定变化发生的时间,或关键词"from"和"to",等同于0%100% 

    2. 元素使用动画

    div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin: 100px auto;
        /* 调用动画 */
        animation-name: 动画名称;
        /* 持续时间 */
        animation-time: 持续时间;
    }
    

    3. 动画常用的属性

    属性描述
    @keyframes规定动画
    animation所有动画属性的简写属性,除了animation-play-state属性
    animation-name规定@keyframes动画的名称。(必须的)
    animation-duration规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的)
    animation-timing-function规定动画的曲线速度,默认是"ease"
    animation-delay规定动画何时开始,默认是0
    animation-iteration-count规定动画被播放的次数,默认是1,还有infinite
    animation-direction规定动画是否在下一周期逆向播放,默认是"normal","alternate"逆向播放
    animation-play-state规定动画是否正在运行或暂停。默认是"running",还有"pause"
    animation-fill-mode规定动画结束后状态,回到起始位置forwards,或者保持最终位置backwards

    3.1 速度曲线细节

    animation-timing-function:规定动画的速度曲线,默认是"ease"

    描述
    linear动画从头到尾的速度是相同的。匀速
    ease默认。动画以低速开始,然后加快,在结束前变慢。
    ease-in动画以低速开始
    ease-out动画以低速结束
    ease-in-out动画以低速开始和结束
    steps()制定了时间函数中的间隔数量(步长)
    <style>
        div {
            /* 将后面的字隐藏 */
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30;
            background-color: pink;
            /* 让文字强制一行内显示 */
            white-space: nowrap;
            animation: w 4s steps(10) forwards;
        }
        @keyanimation w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
    <body>
        /* 实现打字机效果,让文字一个一个地出现 */
        <div>世纪佳缘我在这里等你<div>
    </body>

    3.2 动画简写方式

    animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

    animation: myfirst 5s linear 2s infinite alternate;
    • 简写属性里面不包含animation-play-state
    • 暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用
    • 想要动画走回来,而不是直接跳回来:animation-direction: alternate;
    • 盒子动画结束后,还停留在结束位置:animation-fill-mode: forwards;

    二、综合案例

    热点图案例

    <style>
        .body {
            background-color: #333;
        }
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: white;
        }
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        .city div[class^="pluse"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pluse 1.2s linear infinite;
        }
        .city div .pluse2 {
            animation-delay: 0.4s;
        }
        .city div .pluse3 {
            animation-delay: 0.8s;
        }
        @keyframes pluse { 
            0% {}
            70% {
                /* transform: scale(5); 不要用scale因为它会让阴影也变大 */
                width: 40px;
                height: 40px;
                /* 透明度 */
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
    <body>
        <div class="map">
            <div class="city">
                <div class="dotted"></div>
                <div class="pluse1"></div>
                <div class="pluse2"></div>
                <div class="pluse3"></div>
            </div>    
        </div>
    </body>

    奔跑的熊 

    奔跑的熊
    一只奔跑的熊其实是由八张图片实现的动画效果
    <style>
    body {
        background-color: #ccc;
    div { 
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(media/bear.png) no-repeat;
        /* 元素可以添加多个动画,用逗号分割 */
        animation: bear 3s steps(8) infinite,move 3s forwards;
    }
    @keyframes bear {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -1600px 0;
        }
    @keyframes bear {
        0% {
            left: 0;
        }
        100% {
            left: 50%;
            /* margin-left:-100px; */
            transform: translateX(-50%);
        }
    }
    </style>
    

     

     

     

     

     

     

    展开全文
  • 如果案例有问题,可到QQ群找到今日相关压缩文件下载测试。 WXML: <view class="cebian"> <view animation="{{animation}}"> <view class="cebian01"> <text class="cebian011">...

    如果案例有问题,可到QQ群找到今日相关压缩文件下载测试。

    WXML:

      <view class="cebian">
        <view  animation="{{animation}}">
          <view class="cebian01">
            <text class="cebian011">电话</text>
          </view>
          <view class="cebian02">
            <text class="cebian021">发布</text>
          </view>
          <view class="cebian03">
            <text class="cebian031">咨询</text>
          </view>
        </view>
    
        <view class="cebian04" bindtap="anniuhide">
          <image src="{{anniuimg}}"  animation="{{animations}}"></image>
        </view>
      </view>

    WXSS:

    .cebian {
      width: 50px;
      height: auto;
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: 60px;
      right: 20px;
      z-index: 10;
      overflow: hidden;
    }
    .anniu{
      position: relative;
      left: 50px;
    }
    .cebian01, .cebian02,.cebian03,.cebian04 {
      height: 50px;
      width: 50px;
      text-align: center;
      line-height: 50px;
      border-radius: 60px;
      color: #fff;
    }
    .cebian02,.cebian03,.cebian04{
      margin-top: 10px;
    }
    .cebian01{
      background-color: #50cb67;
    }
    .cebian02{
      background-color: #6785e5;
    }
    .cebian03{
      background-color: #ec4149;
    }
    .cebian04{
      background-color: #949494;
      position: relative;
    }
    .cebian04>image{
      width: 30px;
      height: 30px;
      position: relative;
      top: 10px;
      
    }

    JS:

    Page({
      data: {
        jiantous: false,
        anniuimg: '/picture/jiantou01.png',
      },
      /*右侧按钮部分效果*/
      onReady: function () {
        this.animation = wx.createAnimation();
        this.animations = wx.createAnimation()
      },
      anniuhide: function () {
        var leftjian = this.data.jiantous;
        if (leftjian == false) {
          this.animation.translate(50, 0).step();
          this.animations.rotate(180).translate(3,0).step();
          leftjian = true;
        } else {
          this.animation.translate(0, 0).step();
          this.animations.rotate(0).translate(0, 0).step();
          leftjian = false;
        }
        this.setData({
          animation: this.animation.export(),
          animations: this.animations.export(),
          jiantous: leftjian,
        });
      },
    })

    效果图:

    转载于:https://www.cnblogs.com/yiweiyihang/p/7119540.html

    展开全文
  • 《Java程序设计_游戏动画案例教程》随书课件,原书地址:http://www.tup.tsinghua.edu.cn/book/Showbook.asp?CPBH=052665-01 greenfoot qq 群:29411309 全书共15章,分3个部分。第1~6章是Java基础知识,使学生...
  • 动画设计3Ds Max(初级) (1)综合案例动画制作技术3ds Max(初级)世界坐标贴图和显式贴图(PPT课件).pptx
  • JS动画框架及案例

    千次阅读 2016-01-23 19:14:10
    综合——运动框架 move.js 1、简单动画 1-1、速度动画 D01_share.html 1-2、透明度动画 D02_opacity.html 2、缓冲动画 2-1、缓冲动画 D03_speed.html 3、多物体动画 3-1、多物体动画 D04_morespart01....

    JS动画效果:
    综合——运动框架 move.js
    1、简单动画
        1-1、速度动画  D01_share.html
        1-2、透明度动画  D02_opacity.html
    2、缓冲动画
        2-1、缓冲动画  D03_speed.html
    3、多物体动画
        3-1、多物体动画  D04_morespart01.html D04_morespart02.html
        3-2、获取样式  D05_getStyle01.html D05_getStyle02.html
        3-3、任意属性值(一)  D06_anyValue.html
        3-4、任意属性值(二)
    4、链式动画
        4-1、链式动画  D07_chainAnimation.html
    5、同时运动
        5-1、同时运动 D08_json.htmljson的介绍) D08_sametimeMove.html
        5-2、完美运动框架 move.js
    6、动画案例

    速度动画 D01_share.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>速度动画</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 200px;
                height: 250px;
                background-color: #807a62;
                position: relative;
                left: -200px;
                top: 0;
            }
            #div1 span {
                width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
                height: 50px;
                background-color: aquamarine;
                position: absolute;
                left: 200px;
                top: 75px;
                text-align: center;
            }
        </style>
    
        <script>
            var oDiv;
            window.onload = function() {
                oDiv = document.getElementById('div1');
                /*oDiv.onmouseover = startMoveIn;
                oDiv.onmouseout = startMoveOut;*/
    
                oDiv.onmouseover = function() {
                    //startMove(10, 0);
                    startMove02(0);
                };
                oDiv.onmouseout = function() {
                    //startMove(-10, -200);
                    startMove02(-200);
                };
            };
    
            var timer=null;
            /*startMoveIn() 和 startMoveOut()方法相似,可以进行提取合成 --> startMove()*/
            /*function startMoveIn() {
                clearInterval(timer);
    
                timer = setInterval(function() {
                    if(oDiv.offsetLeft == 0) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                    }
                },30);
            }
    
            function startMoveOut() {
                clearInterval(timer);
    
                timer = setInterval(function() {
                    if(oDiv.offsetLeft == -200) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                    }
                },30)
            }*/
    
            function startMove(speed, iTarget) {
                clearInterval(timer);
    
                timer = setInterval(function() {
                    if(oDiv.offsetLeft == iTarget) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    }
                },30);
            }
    
            //除去speed参数
            function startMove02(iTarget) {
                clearInterval(timer);
    
                var speed;
                if(oDiv.offsetLeft > iTarget) {
                    speed = -10;
                } else {
                    speed = 10;
                }
    
                timer = setInterval(function() {
                    if(oDiv.offsetLeft == iTarget) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    }
                },30);
            }
        </script>
    </head>
    <body>
        <div id="div1"><span id="share">分享</span></div>
    </body>
    </html>
     
    

    透明度动画  D02_opacity.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>透明度动画</title>
        <style>
            body,div{
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 200px;
                height: 200px;
                background: red;
                filter: alpha(opacity=30); /*基于IE*/
                opacity: 0.3; /*基于火狐、Chrome*/
            }
        </style>
    
        <script>
            window.onload = function() {
                var oDiv = document.getElementById('div1');
                oDiv.onmouseover = function() {
                    startMove(100);
                };
                oDiv.onmouseout = function() {
                    startMove(30);
                };
            };
    
            var timer = null;
            var alpha = 30;
            function startMove(iTarget) {
                var oDiv = document.getElementById('div1');
    
                //解决定时器叠加的问题
                clearInterval(timer);
                timer = setInterval(function() {
                    var speed = 0;
                    if(alpha > iTarget) {
                        speed = -10;
                    } else {
                        speed = 10;
                    }
    
                    if(alpha == iTarget) {
                        clearInterval(timer);
                    } else {
                        alpha += speed;
                        oDiv.style.filter = 'alpha(opacity='+alpha+')';
                        oDiv.style.opacity = alpha / 100;
                    }
                },30);
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    </html>

    缓冲动画  D03_speed.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>缓冲动画</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 200px;
                height: 250px;
                background-color: #807a62;
                position: relative;
                left: -200px;
                top: 0;
            }
            #div1 span {
                width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
                height: 50px;
                background-color: aquamarine;
                position: absolute;
                left: 200px;
                top: 75px;
                text-align: center;
            }
        </style>
    
        <script>
            var oDiv;
            window.onload = function() {
                oDiv = document.getElementById('div1');
                /*oDiv.onmouseover = startMoveIn;
                 oDiv.onmouseout = startMoveOut;*/
    
                oDiv.onmouseover = function() {
                    //startMove(10, 0);
                    startMove02(0);
                };
                oDiv.onmouseout = function() {
                    //startMove(-10, -200);
                    startMove02(-200);
                };
            };
    
            var timer=null;
    
            //除去speed参数
            function startMove02(iTarget) {
                clearInterval(timer);
    
                timer = setInterval(function() {
                    var speed = (iTarget - oDiv.offsetLeft) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(oDiv.offsetLeft == iTarget) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    }
                },30);
            }
        </script>
    </head>
    <body>
    <div id="div1"><span id="share">分享</span></div>
    </body>
    </html>

    多物体动画  D04_morespart01.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多物体动画</title>
    
        <style>
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
            }
        </style>
    
        <script>
            window.onload = function() {
                var aLi = document.getElementsByTagName('li');
                for(var i = 0; i<aLi.length; i++) {
                    aLi[i].timer = null; //为每一个li加一个定时器
                    aLi[i].onmouseover = function() {
                        startMove(this,400);
                    };
                    aLi[i].onmouseout = function() {
                        startMove(this,200);
                    };
                }
            };
    
            //var timer = null;
            function startMove(obj, iTarget) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    var speed = (iTarget - obj.offsetWidth) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(obj.offsetWidth == iTarget) {
                        clearInterval(obj.timer);
                    } else {
                        obj.style.width = obj.offsetWidth + speed + 'px';
                    }
                },30);
            }
    
    
        </script>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    </html>

    D04_morespart02.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多物体动画</title>
        <style>
            div{
                width: 300px;
                height: 300px;
                background: red;
                float: left;
                margin: 10px;
    
                filter: alpha(opacity=30);
                opacity: 0.3;
            }
        </style>
    
        <script>
            var ds;
            window.onload = function() {
                ds = document.getElementsByTagName('div');
    
                for(var i = 0; i < ds.length; i++) {
                    ds[i].timer = null;
                    ds[i].alpha = 30;
    
                    ds[i].onmouseover = function() {
                        startChange(this, 100);
                    };
                    ds[i].onmouseout = function() {
                        startChange(this, 30);
                    };
                }
            }
    
            function startChange(obj, iTarget) {
                clearInterval(obj.timer);
    
                obj.timer = setInterval(function() {
                    var speed = (iTarget - obj.alpha) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(obj.alpha == iTarget) {
                        clearInterval(obj.timer);
                    } else {
                        obj.alpha += speed;
                        obj.style.filter = 'alpha(opacity=' + obj.alpha + ')';
                        obj.style.opacity = obj.alpha / 100;
                    }
                }, 30);
            }
    
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>

    获取样式  D05_getStyle01.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取样式</title>
        <style>
            #div1 {
                width: 200px;
                height: 200px;
                background: red;
                border: 2px solid #000;
                font-size: 12px;
                color: #fff;
            }
        </style>
    
        <script>
            var oDiv;
            window.onload = function() {
                oDiv = document.getElementById('div1');
                setInterval(function() {
                    //oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 1 + 'px';
                    oDiv.style.fontSize = parseInt(getStyle(oDiv, 'fontSize')) + 1 + 'px';
                }, 30);
            };
    
            //获取样式
            function getStyle(obj, attr) {
                if(obj.currentStyle) { //currentStyle 针对IE浏览器
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj,false)[attr]; //getComputedStyle 针对火狐浏览器
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">font-size</div>
    </body>
    </html>

    D05_getStyle02.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取样式</title>
        <style>
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 1px solid yellowgreen;
            }
    
            ul li:hover {
                box-shadow: 0 0 7px 2px #0CC;
            }
        </style>
        <script>
            var aLi;
            window.onload = function() {
                aLi = document.getElementsByTagName('li');
    
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].timer = null;
                    aLi[i].onmouseover = function() {
                        startChange(this, 400);
                    };
                    aLi[i].onmouseout = function() {
                        startChange(this, 200);
                    };
                }
            };
    
            function startChange(obj, iTarget) {
                clearInterval(obj.timer);
    
                obj.timer = setInterval(function() {
                    var icur = parseInt(getStyle(obj, 'width'));
                    var speed = (iTarget - icur) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(icur == iTarget) {
                        clearInterval(obj.timer);
                    } else {
                        obj.style.width = icur + speed + 'px';
                    }
                }, 30);
            }
    
            function getStyle(obj, attr) {
                if(obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }
            }
        </script>
    </head>
    <body>
    
    </body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </html>

    任意属性值  D06_anyValue.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>任意属性值</title>
        <style>
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 1px solid yellowgreen;
                filter: alpha(opacity=50);
                opacity: 0.5;
            }
    
            ul li:hover {
                box-shadow: 0 0 7px 2px #0CC;
            }
        </style>
        <script>
            var li1, li2, li3;
            window.onload = function() {
                li1 = document.getElementById('li1');
                li2 = document.getElementById('li2');
                li3 = document.getElementById('li3');
    
                li1.onmouseover = function() {
                    startChange(this, 'height', 400);
                };
                li1.onmouseout = function() {
                    startChange(this, 'height', 100);
                };
                li2.onmouseover = function() {
                    startChange(this, 'width', 400);
                };
                li2.onmouseout = function() {
                    startChange(this, 'width', 200);
                };
                li3.onmouseover = function() {
                    startChange(this, 'opacity', 100);
                };
                li3.onmouseout = function() {
                    startChange(this, 'opacity', 50);
                };
            };
    
            function startChange(obj, attr, iTarget) {
                clearInterval(obj.timer);
    
                obj.timer = setInterval(function() {
                    var icur = 0;
                    if(attr == 'opacity') {
                        icur = Math.round(parseFloat(getStyle(obj, attr))*100);
                    } else {
                        icur = parseInt(getStyle(obj, attr));
                    }
    
                    var speed = (iTarget - icur) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(icur == iTarget) {
                        clearInterval(obj.timer);
                    } else {
                        if(attr == 'opacity') {
                            obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                            obj.style.opacity = (icur + speed) / 100;
                        } else {
                            obj.style[attr] = icur + speed + 'px';
                        }
                    }
                }, 30);
            }
    
            function getStyle(obj, attr) {
                if(obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }
            }
        </script>
    </head>
    <body>
    
    </body>
    <ul>
        <li id="li1"><p>我是高度改变~</p></li>
        <li id="li2"><p>我是宽度改变~</p></li>
        <li id="li3"><p>我是透明度改变~</p></li>
    </ul>
    </html>


    JS动画框架  move.js

    /**
     * Created by DreamBoy on 2016/1/22.
     */
    //获取对象样式,如 getStyle(obj, 'width')
    function getStyle(obj, attr) {
        if(obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
    
    //动画效果,如 startMove(obj, 'width', 200)
    // fn是回调函数,如果fn有传入的话,动画结束后会执行给函数——》可以形成 链式动画
    /*function startMove(obj, attr, iTarget, fn) {
        clearInterval(obj.timer);
    
        obj.timer = setInterval(function() {
            //1.取当前的值
            var icur = 0;
            if(attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr))*100);
            } else {
                icur = parseInt(getStyle(obj, attr));
            }
    
            //2.计算速度
            var speed = (iTarget - icur) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
            //3.检测停止
            if(icur == iTarget) {
                clearInterval(obj.timer);
                if(fn) {
                    fn();
                }
            } else {
                if(attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
        }, 30);
    }*/
    
    //修改——> 不同属性变化的同时运行(使用json  属性值:目标值)
    // startMove(ojb,{attr1:itarget1, attr2:itarget2},fn)
    function startMove(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag = true;
            for(var attr in json) {
                //1.取当前的值
                var icur = 0;
                if(attr == 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr))*100);
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }
    
                //2.计算速度
                var speed = (json[attr] - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                //3.检测停止
                if(icur != json[attr]) {
                    flag = false;
    
                    if(attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                        obj.style.opacity = (icur + speed) / 100;
                    } else {
                        obj.style[attr] = icur + speed + 'px';
                    }
                }
            }
    
            if(flag) {
                clearInterval(obj.timer);
                //obj.timer = null;
                if(fn) {
                    fn();
                }
            }
        }, 30);
    }
    


    链式动画  D07_chainAnimation.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>链式动画</title>
    
        <style>
            body, ul, li{
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 4px solid #000;
                filter: alpha(opacity=30);
                opacity: 0.3;
            }
        </style>
    
        <script src="move.js"></script>
        <script>
            window.onload = function() {
                var li1 = document.getElementById('li1');
                li1.onmouseover = function() {
                    startMove(li1, 'width', 400, function() {
                        startMove(li1, 'height', 200, function() {
                            startMove(li1, 'opacity', 100);
                        });
                    });
                };
                li1.onmouseout = function() {
                    startMove(li1, 'opacity', 30, function() {
                        startMove(li1, 'height', 100, function() {
                            startMove(li1, 'width', 200);
                        });
                    });
                }
            };
        </script>
    </head>
    <body>
        <ul>
            <li id="li1"></li>
        </ul>
    </body>
    </html>

    json介绍  D08_json.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>json介绍</title>
        <script>
            //定义一个json
            var json = {
                a:12,
                b:13
            };
    
            //遍历json
            for(var i in json) {
                document.write(i + ":" + json[i] + "<br/>");
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

    同时运动  D08_sametimeMove.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同时运动</title>
        <style>
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 4px solid #000;
                filter: alpha(opacity=30);
                opacity: 0.3;
            }
            ul li:hover {
                box-shadow: 0 0 7px 4px #ccc;
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload = function() {
                var oLi = document.getElementById("li1");
                oLi.onmouseover = function() {
                    startMove(oLi, {'width':400, 'height':200, 'opacity': 100}, function() {
                        startMove(oLi, {'width': 600});
                    });
                };
                oLi.onmouseout = function() {
                    startMove(oLi, {'width':200, 'height':100, 'opacity': 30});
                };
            }
        </script>
    </head>
    <body>
        <ul>
            <li id="li1"></li>
        </ul>
    </body>
    </html>

    JS动画案例  D09_JSAnimationDemo.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS动画案例</title>
    
        <style>
            #move {
                width: 300px;
                border: 1px solid #ccc;
                margin: 0 auto;
                padding: 10px;
                overflow: hidden;
            }
    
            #move a {
                float: left;
                color: red;
                font-size: 10px;
                /*border: 1px solid #00CCCC;*/
                padding: 35px 30px 0 30px;
                margin: 20px 0 20px 10px;
    
                position: relative;
                text-decoration: none;
                line-height: 25px;
                overflow: hidden;
            }
    
            #move a i{
                position: absolute;
                top: 20px;
                left: 0;
                display: inline-block;
                width: 100%;
                text-align: center;
                filter: alpha(opacity=100);
                opacity: 1;
            }
    
            #move a:hover {
                box-shadow: 0 0 7px 4px #ccc;
            }
        </style>
    
        <script src="move.js"></script>
        <script>
            window.onload = function() {
                var oMove = document.getElementById('move');
                var aLi = oMove.getElementsByTagName('a');
    
                var k=0;
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].onmouseover = function() {
                        var _this = this.getElementsByTagName('i')[0];
                        startMove(_this, {'top':-25, 'opacity': 0}, function() {
                            _this.style.top = 35 + 'px';
                            startMove(_this, {'top':20, 'opacity': 100});
                        });
                    };
                }
            };
        </script>
    </head>
    <body>
        <div id="move">
            <a href="#"><i><img src="img/caipiao.png"></i><p>彩票</p></a>
            <a href="#"><i><img src="img/movie.png"></i><p>电影</p></a>
            <a href="#"><i><img src="img/music.png"></i><p>音乐</p></a>
            <a href="#"><i><img src="img/jiaofei.png"></i><p>缴费</p></a>
            <a href="#"><i><img src="img/licai.png"></i><p>理财</p></a>
            <a href="#"><i><img src="img/food.png"></i><p>外卖</p></a>
        </div>
    </body>
    </html>

    结果演示:


    鼠标移动到图标处,发生动画效果:


    原素材如下:

      caipiao.png     movie.png     music.png     jiaofei.png     licai.png     food.png


    展开全文
  • 动画案例及设计模式研究

    千次阅读 2017-04-24 20:48:32
    三、动画案例一 盖伦击球游戏 游戏案例及所用图片来自: http://blog.csdn.net/qq_28057541/article/details/51172733 这个人做的是一个盖伦击球动画,其中AnimationLegacy用来控制动作的,和监听鼠标键盘...
  • 动画设计 3ds Max 习题作业 要求创建圆柱体模型望远镜效果并设置望远镜的滑动关节望远镜的套筒没有任何的旋转使用减缓效果使望远镜向下移动 操作提示 1选择文件 > 重置命令对场景进行重新设置在场景中简单的创建四个...
  • 第1章 Word 2016高级应用 1.1 文档排版 1.1.1 排版原则 ...7.4 Python与Access综合应用 7.4.1 ODBC简介与设置 7.4.2 Python操作Access数据库 7.4.3 Python与Access的综合应用案例 本章小结 习题 参考文献
  • 本H5网页综合案例视频教程,共33集,主要内容是讲解一个包含五屏的网页综合案例效果如何使用H5+css3实现的全过程,网页每一屏展示的效果和功能都不尽相同。 第1章 1-9集视频课 h5前端综合实例开发教学第01集...
  • 3D动画中两个知识点:perspective、transform-style perspective perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 当为元素定义 perspective 属性时,其子...
  • 综合案例.html基础

    2020-06-12 13:16:02
    先讲解HTML5常用标签,接着讲解CSS3常见样式,主要学习盒子模型,浮动,定位还有高级布局技巧,之后讲解HTML5和CSS3提高,讲解新增加的新特性,新语法,最后讲解PC端品优购项目。以及CSS3动画 2d 3d效果。
  • 内容概要本书精选典型的Microsoft Office高级应用案例,以工作任务为导向,通过工作过程介绍word 2007、Excel 2007和PowerPoint 2007等的知识与应用。书中通过详尽的讲述,深入浅出地介绍Microsoft Office 2007的...
  • 前端实战小案例--简单动画效果

    千次阅读 2019-09-03 13:44:42
    前端实战小案例--简单动画效果 想练习更多前端案例,请进个人主页,点击前端实战案例->传送门 觉得不错的记得点个赞
  • 什么是动画 动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果 动画的基本使用 先定义动画 在调用定义好的动画 语法格式(定义动画) /* ...
  • 综合案例-音乐播放器 功能: 歌曲搜索:搜索歌曲,会出现相应歌曲 1.按下回车(v-on.enter) 2.查询数据(axios接口、v-model) 3.渲染数据(v-for 结合数组) 歌曲播放:点击播放按钮,歌曲会开始播放 歌曲封面:...
  • 游戏制作第5章 游戏制作教学提示 本章主要通过猫鼠游戏飘雪动画猴子看香蕉和花瓣动画4个导入案例来讲解使用ActionScript 3.0动作脚本制作交互动画的方法与技巧最后通过打飞机游戏综合项目介绍制作游戏类Animate CC...
  • 一、过渡动画及关键帧动画 本文大致介绍了CSS3中的技术之一:动画,因为我也是学习者,这只是我自己的观点,如有错误,请指出。废话不多说,开始步入正题: 想必大家都看过动画片:猫和老鼠,其剧情幽默轻松,让人...
  • 十四、2D 转换之 translate 2D 转换 2D 转换是改变标签在二维平面上的位置和形状 移动: translate 旋转: rotate 缩放: scale translate 语法 x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 ...trans

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,427
精华内容 2,570
关键字:

综合动画案例