接上一个文章给动画加一个先快后慢的动作！

最新推荐文章于 2024-01-26 08:54:16 发布
最新推荐文章于 2024-01-26 08:54:16 发布
阅读量640 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44081699/article/details/86062423
版权 
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				font-size: 50px;
			}
			
			body {
				/*height:1000px;*/
			}
			
			div {
				width: 500px;
				height: 3000px;
				background: pink;
				margin: 20px auto;
				/*padding: 100px;*/
				border: 50px solid;
				overflow: auto;
			}
			
			h1 {
				height: 1000px;
				background: blue;
			}
			
			button {
				position: fixed;
				right: 40px;
				bottom: 100px;
			}
		</style>
	</head>

	<body>

		<div>
			<h1></h1>
		</div>
		<button>返回顶部</button>

		<script>
			var oDiv = document.querySelector("div");
			var oBtn = document.querySelector("button");
			console.log(window);
			oBtn.onclick = function() {
				//     document.documentElement.scrollTop=100;
				timer = setInterval("runToTop()", 0);
			}

			function runToTop() {
				a1 = document.documentElement.scrollTop
				if (a1 > 1000) {
					a1 = a1 - 10;
					window.scrollTo(0, a1);
				}
				if (a1 < 1000) {
					a1 = a1 - 5;
					window.scrollTo(0, a1);
				}
				if (a1 < 0) {
					window.scrollTo(0, 0);
					clearInterval(timer);
				}
			}
刘一卓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Animations动画和Transition过渡效果
weixin_44358189的博客
03-01 564
cubic-bezier(n, n, n, n):使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间。可能的值是从 0 到 1 的数值。ease-in-out:以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1)ease-out:以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1)ease-in:以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1)
前端 —— JavaScript 基础篇 缓动动画（先快后慢的动画效果）demo
宁静致远
06-26 2764
今天来个 缓动动画的小例子 ，是为了方便自己日后的复制粘贴，若是能帮助到大家，拿走不谢。话不多说，直接上代码。 <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background: yellow; text-align: center; position: relative; top: 0px; .
cocos2dx动画加速与减速
尘墨
11-16 1385
cocos2d-x动画加速与减速 动画是游戏的必然要素之一，在整个游戏过程中，又有着加速、减速动画的需求。以塔防为例子，布塔的时候希望能够将游戏减速，布好塔后，则希望能将游戏加速；当某个怪被冰冻后，移动速度减缓，而其他怪的移动速度不变。cocos2d-x引擎为我们提供了很强大的接口，下面就将我实验的过程复述一遍，也方便他人。 1）实现全局的加速、减速。 通过设置Scheduler的
css动画效果，过渡效果基础详解
ma_qianbo的博客
08-10 736
1.css动画效果 1.1定义动画 1.2动画的属性 动画名称 animation-name 完成一次动画的时间 animation-duration 动画延迟 animation-delay 动画运动方向 animation-direction reverse反向 alternate交替 alternate-reverse先反向，在交替 ...
CSS动画animation关键帧的使用
蛋蛋老公的博客
05-19 1344
举例荧光字 <div class="word">abc</div> .word { animation: animate linear 2000ms infinite; } @keyframes animate { 0% { opacity: 0.3; } 100% { opacity: 1; text-shadow: 0 0 80p
jQuery给图片点赞加一动画效果特效代码
03-20
我们可以创建一个隐藏的元素（如一个表示点赞数的），在用户点击图片时，显示这个元素，并通过`.animate()`方法逐渐改变其内容，从当前值到增加后的值。 为了实现这个动画效果，我们需要以下步骤： 1. **HTML结构*...
jQuery给图片点赞加一动画效果.zip
11-21
"jQuery给图片点赞加一动画效果"是一个常见的需求，特别是在社交媒体、博客或者评论系统中。这个压缩包文件可能包含了一个示例，展示了如何使用jQuery库来创建一个图片点赞功能，并且在用户点击后，点赞数会有一个...
几个flash动画作品带源文件
01-28
在本资源中，我们拥有几个基于Flash的动画作品，这些作品附带了源文件，对于想要学习或深入了解Flash动画制作的初学者来说是一份宝贵的资料。Flash是一款经典的动画创作工具，曾广泛应用于网页互动设计、游戏开发...
android 两个activity 翻转动画切换
02-20
一个是进入动画（例如，`activity_flip_in.xml`），另一个是退出动画（例如，`activity_flip_out.xml`）。 1. `activity_flip_in.xml`（进入动画）: ```xml android:duration="500" android:propertyName=...
animation-timing-function如何控制动态特效的速度缓慢？
最新发布
yrldjsbk的博客
01-26 477
第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
cocos2d-x动画加速与减速（转载）
杨名天吓
04-21 1万+
最近的游戏学习中使用到精灵运动的加速与减速，于是征集了一些权威的文章供参考。 文章一： cocos2d-x动画加速与减速 动画是游戏的必然要素之一，在整个游戏过程中，又有着加速、减速动画的需求。以塔防为例子，布塔的时候希望能够将游戏减速，布好塔后，则希 望能将游戏加速；当某个怪被冰冻后，移动速度减缓，而其他怪的移动速度不变。cocos2d-x引擎为我们提供了很强大的接口，下面
【flutter 动画汇总】
u011646541的博客
05-28 417
flutter 动画汇总
Flutter Animation动画开发之——Curve动画曲线
野猿新一
11-05 4757
简介 在Flutter Animation动画开发之——最简单的动画入门这篇文章中我们介绍了最简单的动画开发流程 今天我们在该动画的基础上添加动画曲线，默认情况下动画是线性的，可以理解为变化是匀速的，设置动画曲线可以设置动画的变化速率，可以是加速的，也可以是减速的，或者是先加速后减速的，等等 动画曲线用的是CurvedAnimation类，用法如下， parent参数传入一个Animati...
css3动画-ease先快后慢
热门推荐
web前端技术交流分享
12-24 1万+
无标题文档 .trans_box { padding: 20px; background-color: #f0f3f9; *zoom:1; } .trans_list { width: 10%; height: 64px; margin:10px 0; background-color:#486AAA; color:#fff; text-align:center; } .
Android动画中Interpolator 加速器的使用
ecstatic的专栏
12-23 1万+
遇到一个项目需求，想让动画变得更活泼一点，于是想到了动画属性中的Interpolator，写了基本例子测试一下android提供给我们现成的加速器的效果：
动画的常用的枚举值,动画先慢再快再慢,动画越来越快,动画越来越慢,动画匀速,动画期间允许交互
xuebing22022的博客
12-04 1038
动画的常用的枚举值,动画先慢再快再慢,动画越来越快,动画越来越慢,动画匀速,动画期间允许交互
animation动画过渡
weixin_45243726的博客
09-10 473
前言 一个简单的小案例，网页旋转六边形的图片墙 一、animation animation 参数一 参数二参数三参数四参数五 参数六 参数一：需要绑定的动画名称 参数二：完成动画所需要的时间 参数三：动画的速度 linear： 匀速运动 ；ease ：默认值，先慢再快；ease—in：以高速开始，逐渐减慢； ease-out：低速开始，逐渐加快。 参数四：动画开始前需要等待的时间。 参数五：动画循环的次数。 infinite：无限...
变形-transform　迅速变化 过渡-transition 缓慢变化 动画-animation 关键帧动画 --Css3笔记
qq_39579242的博客
07-25 8019
1、变形-transform　迅速变化 2、过渡-transition 缓慢变化 3、动画-animation  关键帧动画 1、转换的原点    默认情况下，原点是在当前物体的中心点上    修改原点：         属性：transform-origin     值：1、x坐标  y坐标            当前物体的左上点为 x:0 y:0         2、宽度百分比 高度百分比 ...
给椭圆加一个涟漪的css动画
05-19
可以通过使用CSS的伪元素和...我们通过 `box-shadow` 属性定义了一个扩散的阴影，并在动画中逐渐增加和减少阴影的大小和透明度，从而产生涟漪的效果。 你可以根据需要调整样式和动画的参数，来实现不同的涟漪效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值