精华内容
下载资源
问答
  • 子元素hover离开时的平滑过渡效果

    千次阅读 2019-04-11 10:17:06
    hover时设置的效果离开时平滑过渡: <!DOCTYPE html> <html> <meta charset="UTF-8" /> <title>hover平滑过渡效果</title> <head> <style> div { width: ...
    1. hover时设置的效果离开时平滑过渡:
    <!DOCTYPE html>
    <html>
        <meta charset="UTF-8" />
        <title>hover平滑过渡效果</title>
    	<head>
    		<style>
    			div {
    				width: 100px;
    				height: 100px;
    				background: red;
    				position: relative;
    				transition: all 1s linear;		//这个是关键
    			}
    			
    			div:hover {
    				//这里可以写任何动画效果,比如放大、缩小,
    				//但是不可以写如 display:block -> display:none 这种非线性变化
    				opacity: 0;
    			}
    		</style>
    	</head>
    	
    	<body>
    		<div></div>
    	</body>
    </html>
    
    1. 较为复杂的结构中的hover效果
    <!DOCTYPE html>
    <html>
        <meta charset="UTF-8" />
        <title>hover平滑过渡效果</title>
    	<head>
    		<style>
    	        div{ position: relative; float: left; box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2); }
    		    div img{ margin: 20px auto; margin-top: 40px; width: 40%; display: block;  }
    		    div h5{ line-height: 40px; margin: 0px; text-align: center; }
    		    div p{ width: 84%; margin: 1em auto; }
    		    div span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ff0000; color: #FFF; padding: 14%; box-sizing: border-box; }
    		    
    		    /*动画效果*/
    		   	div:hover span, div:active span{
                    opacity: 1;
    		   	}
    		   	div span{
    				transition: all 0.3s linear;
    		        opacity: 0;
    		   	}
    		</style>
    	</head>
    
    	<body>
    		<div>
    			<img src="images/icon_01.png" />
    			<h5>标题</h5>
    			<p>副标题</p>
    			<span>详细文本</span>
    		</div>
    
    	</body>
    
    </html>
    
    展开全文
  • <div class="content"> <img src="./矩形2275-1.png" /> </div> <script> </script> <style> .content { position: absolute; width: 100px; ... transi.
    <div class="content">
        <img src="./不确定1.png" />
    </div>
    <script>
    </script>
    <style>
        .content>img {
            transition: all 1s linear;
        }
        .content>img:hover {
            transform: rotate(180deg);
        }
    </style>

     

    展开全文
  • tween.js是一款可生成平滑...你只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效果。   ...

    tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效果。


     

    展开全文
  • tween.js一个平滑效果的js动画库

    千次阅读 2017-07-16 22:06:10
    tween.js一个平滑效果的js动画库

    tween.js一个平滑动效果的js动画库

    1. tween.js是什么?
      tween.js是一款可生成平滑动效果的js动画库,允许以平滑的方式修改元素的属性值。

    2. tween.js达到什么效果?
      它可以通过设置,生成各种类似CSS3的动画效果。

    3. tween.js的参数有哪些?
      tween.js中的方法接收4个参数:t,b,c,d,分别是:
          t:current time 当前时间;
          意思为:开始的步骤(一般从0开始),预示着一段动画的开始;
          b beginning value 初始值;
          意思为:开始量(开始的属性值);
          c change in value 变化量;
          意思为:属性值的该变量,即结束位置的属性值 - 开始位置的属性值;
          d duration 持续时间;
          意思为:结束的步数(运动的总时间)。

    4. tween.js的效果:
      Linear:线性匀速运动效果;
      Quadratic:二次方的缓动(t^2);
      Cubic:三次方的缓动(t^3);
      Quartic:四次方的缓动(t^4);
      Quintic:五次方的缓动(t^5);
      Sinusoidal:正弦曲线的缓动(sin(t));
      Exponential:指数曲线的缓动(2^t);
      Circular:圆形曲线的缓动(sqrt(1-t^2));
      Elastic:指数衰减的正弦曲线缓动;
      Back:超过范围的三次方缓动((s+1)*t^3 – s*t^2);
      Bounce:指数衰减的反弹缓动。
      tween.js文件就是对tween.js动画效果进行编译:(不压缩约150行代码)
      这里写图片描述

    5. tween.js的运用:
      easeIn:从0开始加速的缓动,慢->快;
      easeOut:减速到0的缓动,快->慢;
      easeInOut:前半段从0开始加速,后半段减速到0的缓动;
      注意:linear只有一种效果,匀速;

    6.参考代码:
        先将tween.js文件引入到html文件中;

    var t=0,
        b=0,
        c=500,
        d=50;
    function Run(){
        box.style.left = Tween.Back.easeIn(t, b, c, d) + "px";  
        if (t < d) {
            t++;
            setTimeout(Run, 10);
        }
        //通过以下代码可以观察在变化过程中tween.js四个参数的变化;     
        console.log("t"+t+"b"+b+"c"+c+"d"+d);
        }
    Run();

    动画效果:
    这里写图片描述

    上面的代码的动画:移动距离(变化量)为500px,移动时间(持续时间)为50毫秒,动画效果与参数定义相同;

    再看看下面代码的动画效果~

    if (t <= d) {
        t++;
        requestAnimationFrame(Run);
    } else {
        t++;
        setTimeout(Run, 10);
    }   

    动画效果:
    这里写图片描述
    红色方块去哪了?七月天气这么热,你跑得这么快,还不停;

    由此可见:上面的代码忽略c(变化量)、d(持续时间)的限定;
    当然,tween.js还有很多可用的动画效果,大侠们可以根据自己的需要合理使用,能够起到很好的效果!

    展开全文
  • 使用Scoller类实现平滑滚动效果

    千次阅读 2014-07-22 14:28:28
    // 强制结束动画,参数为true,表示停止在动画强制结束时的位置上;false则表示动画继续进行直到结束 break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: Log.d("Scroller-CurrX:",""+...
  • 如果你想粒子到结束时呈现一种平滑淡出的效果,确保设置结束颜色的透明度为0%(全透明)如果你要避免粒子在它的生存期内改变初始颜色,则在结束颜色中使用黑色。大多数情况下,粒子将在结束时设置为黑色的全透明效果...
  • Android 平滑和立体翻页效果

    千次阅读 2015-03-11 11:40:32
    Android launcher 的平滑和立体翻页效果 我们这里把 Android launcher 程序的 Workspace 相关的代码抽取出来,以一个比较简单的代码来展示 launcher 程序是如何实现多页以及不同页面之间的切换效果。本示例代
  • 由于hover伪类添加的动画效果,仅当鼠标放在元素上时会被触发,而当鼠标离开时,效果会中断,会显得很生硬。 大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦,CSS3便...
  • 3、实现效果:鼠标点击左键开始读条,读满结束。 using UnityEngine; using UnityEngine.UI; public class test : MonoBehaviour { //声明imgFillAmount private Image imgFillAmount; //是否开始读条 bool isPlay ...
  • 我们这里把 Android launcher 程序的 Workspace 相关的代码抽取出来,以一个比较简单的代码来展示 launcher 程序是如何实现多页以及不同页面之间的...图 1:平滑移动效果 图 2:立体翻页效果 回页首 窗
  • Android 平滑和立体翻页效果2

    千次阅读 2012-11-21 09:33:31
    Android launcher 的平滑和立体翻页效果 我们这里把 Android launcher 程序的 Workspace 相关的代码抽取出来,以一个比较简单的代码来展示 launcher 程序是如何实现多页以及不同页面之间的切换效果。本示例代
  • 未显示出来的数据可以滑动屏幕让底部的数据显示出来,但是原生态的GridView 并没有很美观平滑的一个动画来滚动数据,因此,我们可以稍做修改就可以实现 类似VST全聚合里面 视频加载也那样的翻页动画效果了。...
  • Android 平滑和立体翻页效果1

    万次阅读 2011-09-17 18:13:57
    http://www.ibm.com/developerworks/cn/opensource/os-cn-android-anmt1/index.html Android 平台提供了一套完整的动画框架,使得开发者可以用它来开发各种动画效果,本文将向读者阐述 Android 的
  • 前段时间为了系统学习MFC,花了一星期的课余时间复习了c++,将>看了一遍,感觉关于c++的见识涨了不少,毕竟看完大师级人物写的...今天上午看见Yorhom用HTML5实现了一个『HTML5梦幻之旅』-滚动播放的幻灯片效果 ,感觉
  • JS图片滚动(无缝、平滑、上下左右滚动)效果 ul { list-style: none outside none; margin: 0; padding: 0; } ul li img { border: medium none; display: block; } #colee, #colee_bottom { float: left; margin-...
  • 传送门,点击我!
  • 故而,要实现平滑滚动效果,我们就要知道“起始位置”、“结束位置”以及“如何让页面从一个点到另一个点”。 获取起始位置和终点位置 想要获取起始位置和终点位置,那就必须确定参考点。在网页中,常用的参考点是...
  • Android TV listView焦点平滑移动

    千次阅读 2016-01-05 20:02:29
    智能电视 listView 焦点 平滑移动
  • jquery平滑滚动插件

    千次阅读 2013-09-07 16:54:41
    因此需要一些插件来去实现平滑的滚动的效果。最近做wiki发现了几个不错的插件。jquery.smooth-scroll就是很不错的一款实现此功能的插件。 插件信息 官网:https://github.com/kswedberg/jquery-smooth-scroll ...
  • 贪吃蛇平滑移动 ...运行效果如下: Cocos Creator版本:2.2.0 公众号后台回复"贪吃蛇",获取该教程完整代码下载地址: 初始化蛇头和蛇身 该项目刚开始的资源管理器内容显示如下: Head.j...
  • 平滑样条法_R

    万次阅读 2018-07-20 14:47:31
    平滑样条法 平滑样条法
  • 实验三:图像空间域平滑 实验目的  理解 图像空间域平滑的目的和意义  了解图像空间域平滑的各种方法及优缺点;  掌握图像空间域的邻域运算方法;  编程实现图像局部平均法、空间低通率波法、中值滤波法对...
  • Android 百度地图 Marker 平滑移动

    千次阅读 热门讨论 2016-12-27 10:41:29
    跳点我们大家都会,只需要重新为Marker赋值一个坐标点就好了,但是如果我们要平滑移动呢,我的做法就是为坐标点频繁赋值,使其看起来像是移动过去的,好了,废话不多说了,看效果吧 上面花了条线就是为了让我们...
  • 目录一、平滑升级(优雅重启)的一般思路二、Golang Socket 网络编程1、服务端程序 server.go2、客户端程序 client.go3、运行示例程序三、Golang HTTP 编程1、http服务程序 http.go2、运行示例程序四、Golang ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,300
精华内容 10,520
关键字:

平滑结束效果是