JavaScript之动画

最新推荐文章于 2024-06-10 14:40:17 发布
最新推荐文章于 2024-06-10 14:40:17 发布
阅读量262 收藏
点赞数
分类专栏： String 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38269362/article/details/107280744
版权

动画

transform

/* 元素进行平移 translate(x,y) translateX(x)  */
	/* transform: translate(20px,50px); */
				
				/* 进行 缩放  scale(x,y)  scaleX()*/
				/* transform: scale(); */
			
				/* 旋转 */
				/* transform: rotate(10deg ); */

/* 过渡效果 */
			/* transition: width 10s ; */
			
			/* 多个 */
			/* transition:width 10s , height 10s ; */
			
			/* 透明 */
			/* transition: opacity 10s; */
			
			/* 所有 */
			/* transition: all 8s; */
			
			/*加延迟时间 第一个是持续时间，第二个是延迟时间  */
			/* transition: all 5s 2s; */
			
			/* ease 慢快慢 */
			/* transition:all 15s ease; */
			
			/* 执行动画，执行时间  线性 延迟  循环几次（infinite 无限次）
			从开始到结束，再返回到开始   保持最后状态(forwards),backwards
			在延迟的时间内，动画已经进行应用了。
			*/
	
	/* 
			animation: first 1s linear  infinite ;
 			animation-name
			animation-duration
			animation-timing-function: ;
			animation-delay:
			animation-iteration-count: 播放次数 */
/* 			animation-direction: ; 逆向播放 normal默认 逆向alternate
			 animation-play-state: ; 运行 暂停
			 animation-fill-mode:  动画状态 默认是 none 保持最后状态(forwards),backwards
			在延迟的时间内，动画已经进行应用了。 */

动画

/* 动画 */
			@keyframes first{
				
			/* 	//开始
				from{
					background-color: antiquewhite;
				}
			 //结束 
				 to{
					background-color: #00008B;
				} 
		
			}
			 */

//第2中方式：
//这种方式 是按照动画进行的百分比进行动画的。
                 0%{
					background-color: cadetblue;
					transform: translate(230px,-60px);
				}
				25%{
					background-color:aqua;
					transform: translateY(200px);
				}
			
				50%{
					background-color:#F0F8FF ;
					transform: translateX(-200px);
					}
			
				75%{
					background-color:cadetblue;
					transform: translateY(-80px);
				}
			
				100%{
					background-color:red;
					transform: translateX(60px);	
				}


			}

动画的小练习

<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			.ma{
				width: 300px;
				height: 300px;
				transform: translate(200px,200px);
			}
			.box{
				position: absolute;
				top: 0;
				left: 0;
				width: 300px;
				height: 300px;
				border-radius: 10px;
				backface-visibility: hidden;
				/* 鼠标：小手 */
				cursor: pointer;
				transition: all 2s;
			}
			.b1{
				background-color: #00008B;
			}
			.b2{
				background-color: #FF0000;
				transform: rotateY(-108deg);
			}
		</style>
	</head>
	<body>
		<div class="ma">
			<div class="box b1" id="ss"></div>
			<div class="box b2"></div>
			
		</div>
	</body>
	<script>
		
		var bt1=document.querySelector(".b1");
		var bt2=document.querySelector(".b2");
		
		
		bt1.onclick = function(){
			console.log(1);
			bt1.style.transform="rotateX(180deg)";
			bt2.style.transform="rotateX(0deg)"
		}
		bt2.onclick=function(){
			bt1.style.transform="rotateX(0deg)";
			bt2.style.transform="rotateX(180deg)"
		}
	</script>
</html>
雪落无痕颂千殇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript动画
小王的博客
08-26 7287
在设计前端页面时，会用到很多效果，我们可以采用CSS样式或JavaScript来实现，在这里给大家介绍JS动画
浅析JavaScript动画
10-24
JavaScript动画是一种利用JavaScript编程语言实现的动态效果，可以通过改变页面上的DOM元素属性来达到动画效果。它广泛应用于网页设计和用户体验优化中，使得网页更加生动和富有交互性。 在制作JavaScript动画时，...
大话 JavaScript 动画
weixin_34081595的博客
10-04 123
背景 138.2亿年前，世界上没有时间和空间，或许世界都不存在，在一个似有似无的点上，汇集了所有的物质，它孕育着无限的能量与可能性。 宇宙大爆炸 巨大的内力已无法被抑制，瞬间爆发，它爆炸了！世界上有了时间和空间，随着岁月的变迁，时光的流逝，无数的星系、恒星、卫星、彗星形成。我们生活的地球，只是茫茫宇宙中的一个小小的天体，或许在遥远的宇宙的另一边，会有平行世界的存在，或许在那里，我们可能是医生、老师...
【JavaScript脚本宇宙】从轻量级到高性能：解锁Web动画魔法的六大利器
记录我的学习历程
06-10 826
本文将深入探讨六种流行的JavaScript动画库：Anime.js、Velocity.js、GSAP、Mo.js、Popmotion和Tween.js。每个库都有其独特的特性和优势，适用于不同类型的动画需求。通过对这些库的细致分析，读者将能够选择最适合其项目的动画库，并加快开发过程，实现出色的动画效果。
javascript实现动画
遇见更好的自己
03-09 638
位置：static fixed relative absolure Static 是默认值 setTimeout(“function”,interval) 经过预定的一段时间后执行 第一个参数是函数的名字，第二个参数是设定的时间 //位置移动 每5秒改变一次 function positionMessage(){ if(!document.getElementById) retur
JavaScript 动画（三十六）
mzoy的专栏
07-30 518
 我们可以使用 JavaScript 来创建动态的图像。实例按钮动画 利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。 JavaScript 动画使用 JavaScript 创建动态图像是可行的。窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。在下面的例子中，我们要制作一个充当链接按钮的图像。我们将使
JavaScript 动画
m0_55201788的博客
01-23 374
动画原理 1. 获得盒子当前位置 2. 让盒子在当前位置加上移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位， 才能使用element.style.left 动画分匀速动画和变速动画 匀速动画 就是 盒子是当前的位置 + 固定的值 10 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 1...
JavaScript粒子动画
08-09
每个粒子都有自己的属性，如位置、速度、颜色、大小等，这些属性可以通过JavaScript进行随机化或基于特定规则变化，从而创造出各种不同的动画效果。在本例中，粒子动画可以根据鼠标移动来改变其行为，这种交互性增强...
css+javascript 实现扇形导航动画效果
06-08
"CSS+JavaScript 实现扇形导航动画效果"是一个巧妙地将这两种技术结合的示例，旨在为用户创造一个独特且引人入胜的导航体验。这个项目通过CSS来布局和设计扇形导航的静态部分，然后利用JavaScript实现动画效果，使...
javascript实现队列动画
01-26
在JavaScript编程领域，队列动画是一种常见的技术，用于在网页上创建流畅、有序的动态效果。这个实例展示了如何利用JavaScript的特性来实现这样的效果。队列动画的基本思想是将一系列动画动作按照一定的顺序组织起来...
JavaScript动画引擎
06-29
JavaScript动画引擎，如Animation.js，是开发者用于在Web页面上创建流畅、动态视觉效果的关键工具。这个引擎的设计理念是作为一个轻量级、可扩展的解决方案，帮助开发者自定义和控制他们的动画过程，而不是提供预设...
Javascript动画（一）
killnger的专栏
12-22 1422
Javascript定时执行代码块方式 int:setInterval(func, msec) 此方法是每隔一定的时间(msec参数值)调用一次传给它的函数(func参数)，若不主动调用clearInterval(int)取消定时器，则会一直执行下去。 function animate(){ // 需执行的代码 } // 每秒60帧速率执行 let timerId = setInterval(a...
JavaScript—动画
这里是Cikian，分享原创博客@www.cikian.cn
04-09 974
JavaScript—动画 一、动画原理 通过定时器setInterval不断移动盒子位置。 步骤： 获得盒子当前位置； 让盒子在当前位置加上1个移动距离； 利用定时器不断重复这个操作； 结束定时器。 注意：元素需要加定位。 例： HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head>
JS动画
上善若水
10-23 657
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动画&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;动画&am
javascript动画制作
weixin_41530821的博客
04-11 953
1.动画的定义：让图片动起来2.动画的种类            闪现动画                   在触动事件的时候，直接给图片一个style.left值即可                                        匀速动画  speed设置为恒定值                   此处的speed为10，每次改变style.left的值即可。        ...
JavaScript基础动画
C+=UI~(Nip)
06-23 3005
学习JS过程中整合的好的学习资源
JavaScript实现动画效果
One of thre_tigers的博客
01-25 7397
动画基础 (1)位置 (2)时间 (3)设置时间增量 (4)抽象 用动画增强网页效果 (1)设置动画 (2)变量作用域 (3)改进 (4)生成HTML标记添加安全检查
javascript简易动画效果
最新发布
06-16
JavaScript 是一种常用的客户端脚本语言，可以用来创建各种动态和交互式的网页效果，包括简单的动画。以下是一些基本的 JavaScript 动画创建方法： 1. **逐像素操作（DOM manipulation）**: 使用 `setInterval` 或 `requestAnimationFrame` 定时改变元素的位置、尺寸或样式，模拟平移、缩放等效果。例如： ```javascript let element = document.getElementById('myElement'); let pos = 0; function animate() { pos += 5; // 每次移动5像素 element.style.left = pos + 'px'; // 更新元素位置 if (pos < 200) { // 当达到目标位置时停止动画 requestAnimationFrame(animate); } else { clearInterval(intervalId); // 清除定时器 } } animate(); ``` 2. **CSS动画**: 可以使用 CSS 的 `@keyframes` 规则定义动画，并结合 JavaScript 控制播放或暂停： ```html <style> @keyframes move { from { left: 0; } to { left: 100px; } } </style> <div id="myDiv" style="animation: move 2s"></div> <button onclick="document.getElementById('myDiv').style.animationPlayState = 'paused';">暂停</button> ``` 3. **Transform 动画**: 利用 `transform` 属性，如 `translate`, `rotate`, `scale` 等，创建旋转、缩放和平移动画： ```javascript element.addEventListener('transitionend', function() { // 动画结束的回调 }); element.style.transform = 'translateX(100px) rotate(45deg)'; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值