限时优惠活动
亲爱的苦力吧用户,我们为了回馈新老用户一直以来的鼎力支持,即日起(2025-02-06至2025-03-06)凡是购买苦力吧VIP/充值K币的新老用户,都直接可获得买一送一的优惠馈赠。例如:购买一个月的VIP会员可直接获得两个月的VIP会员;充值100K币可直接获得200K币,以此类推!有任何疑问可联系在线客服,感谢各位用户对苦力吧素材的信任与厚爱,我们将一如既往的给大家上新更多优质的素材源码,祝大家开工大吉、工作顺利、心想事成。

javascript+css3倾斜变形表单美化飞来动画特效

所属分类: 网页特效-动画效果    2024-12-01 09:00:15

javascript+css3倾斜变形表单美化飞来动画特效 ie兼容12
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

javascript+css3倾斜变形表单美化飞来动画特效(共2个文件)

    • index.html

使用方法

	var oWrap = document.getElementsByClassName('wrap')[0],
		oBox = document.getElementsByClassName('box'),
		oBtn1 = document.getElementById("btn1"),
		oShadow = document.getElementsByClassName("shadow")[0],
		oCon = document.getElementsByClassName("con"),
		oIcon1 = document.getElementsByClassName('icon1'),
		oIcon2 = document.getElementsByClassName('icon2'),
		num = [0,0,0,0,0,0,0,0,0]; //控制每一行的开关

/*  待开发动画= =可以把呢张纸慢慢变平
	oBtn1.onclick = function () {
		if(bool){
			for(let i = 29,j = 0;i >= 0;i--,j++){
				oBox[i].style.cssText = `transform: rotateX(0deg);transition: 1s ${j*0.2}s`;
			}
			oShadow.style.cssText = 'opacity: 0';
			bool = !bool;
		}else {
			for(let i = 0;i < 30;i++){
				oBox[i].style.cssText = `transition: 1s ${(i+1)*0.2}s`;
			}
			oShadow.style.cssText = 'opacity: 1';
			bool = !bool;

		}
	}
*/
	oBtn1.onclick = function () { //点击按钮之后的入场动画
		oWrap.style.cssText = "animation: move 2s ease forwards;";
		oShadow.style.cssText = "animation: change1 1s linear forwards;";
		for(var i = 0;i < 30;i++){
			oBox[i].style.cssText = `animation: change2 0.6s ${i*0.1-0.4}s linear forwards;`;
		}
		this.style.cssText = "opacity: 0;visibility: hidden;";
	}

	for(let i = 0;i < 8;i++){ //for循环生成前八个按钮的点击事件
		oCon[i].onclick = function () {
			if(num[i]){
				oIcon1[i].style.opacity = "1";
				oIcon2[i].style.opacity = "0";
				num[i] = 0;
				for(var k = 0;k < 8;k++){ //判断是否八个按钮都被选中 如果选中则全选按钮自动亮起
					if(num[k] === 0){
						num[8] = 0;
						oIcon1[8].style.opacity = "1";
						oIcon2[8].style.opacity = "0";
					}
				}
			}
			else {
				oIcon2[i].style.opacity = "1";
				oIcon1[i].style.opacity = "0";
				num[i] = 1;
				for(var k = 0;k < 8;k++){ //判断是否八个按钮是否其中一个未勾选 则全选按钮熄灭
					if(num[k] === 1){
						if(k === 7){
							num[8] = 1;
							oIcon1[8].style.opacity = "0";
							oIcon2[8].style.opacity = "1";
						}
					}else {
						break;
					}
				}
			}
		}
		
	}

	oCon[8].onclick = function () { //全选按钮单独处理
		if(num[8]===0){
			oIcon1[8].style.opacity = "0";
			oIcon2[8].style.opacity = "1";
			for(let j = 0;j < 8;j++){
				num[j] = 1;
				oIcon1[j].style.opacity = "0";
				oIcon2[j].style.opacity = "1";
			}
			num[8] = 1;
		}
		else {
			oIcon1[8].style.opacity = "1";
			oIcon2[8].style.opacity = "0";
			for(let j = 0;j < 8;j++){
				num[j] = 0;
				oIcon2[j].style.opacity = "0";
				oIcon1[j].style.opacity = "1";
			}
			num[8] = 0;
		}
	}

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 动画效果

jquery交互式圆形滑动数字点选特效代码

一款圆形点选滑块动画特效,核心功能鼠标拖动或选择数字长条,可抽出并显示圆形顶部位置,有点类似于抽签效果。
  动画效果
 4494  0

javascript多层级DIV沉浸式滚动缩放动画特效代码

类似于在三维场景中的各个层上平滑放大和缩小。点击滚动菜单链接,可滚动调整当前层的最上层级数值,触发动态视觉体验。
  动画效果
 5277  0

jquery富有灵感的立方体动画特效

一款基于jquery实现的动画效果,犹如搭建房子那般,循序渐进堆砌推进动画特效。
  动画效果
 4104  0

CSS3卡通电子琴弹奏动画特效

一个纯CSS3制作的卡通电子琴动画特效,使用CSS3绘制的电子琴外观,并不能弹出美妙的音乐,但是它由纯CSS3实现,因此可以当gif动画来展示。
  动画效果
 3121  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论