{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

CSS3手机端点击弹出申请信息填写表单代码

CSS3手机端点击弹出申请信息填写表单代码,有漂亮的银河星球围绕图标旋转动画效果,点击立即申请按钮切换到用户资料填写表单。


js代码

<script>
var showApplyfor = document.querySelector("#advert .content span");
showApplyfor.addEventListener("click", function () {
	document.querySelectorAll("#advert .content")[0].style.background = "#FFFFFF";
	document.querySelector("#advert .content span").style.display = "none";
	document.querySelector("#advert .content img").style.display = "none";
	document.querySelectorAll("#advert .bg1")[0].className = "bg1 animation-five";
	document.querySelectorAll("#advert .bg2")[0].className = "bg2 animation-five";
	document.querySelectorAll("#advert .bg3")[0].className = "bg3 animation-five";
	document.querySelectorAll(".content")[0].className = "content animation-four";
	setTimeout(function () {
		document.querySelector("#advert").style.display = "none";
		document.querySelector("#applyfor").style.display = "block";
		document.querySelector("#applyfor i").className = "animation-one";
		document.querySelector("#applyfor form div").className = "animation-six";
		setTimeout(function () {
			document.querySelectorAll("#applyfor input")[0].className = "animation-one";
			setTimeout(function () {
				document.querySelectorAll("#applyfor input")[0].style.left = "16px";
			}, 600);
			setTimeout(function () {
				document.querySelectorAll("#applyfor input")[1].className = "animation-one";
				setTimeout(function () {
					document.querySelectorAll("#applyfor input")[1].style.left = "16px";
				}, 600);
				setTimeout(function () {
					document.querySelectorAll("#applyfor input")[2].className = "animation-one";
					setTimeout(function () {
						document.querySelectorAll("#applyfor input")[2].style.left = "16px";
					}, 600);
					setTimeout(function () {
						document.querySelector("#applyfor button").className = "animation-two";
						setTimeout(function () {
							document.querySelector("#applyfor button").style.left = "70px";
						}, 600);
						setTimeout(function () {
							document.querySelector("#applyfor #shadow").className = "animation-three";
							setTimeout(function () {
								document.querySelector("#applyfor #shadow").style.top = "8px";
								document.querySelector("#applyfor #shadow").style.left = "8px";
							}, 600);
						}, 200);
					}, 200);
				}, 200);
			}, 200);
		}, 200);
	}, 300);
})
</script>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载


爱资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS3手机端点击弹出申请信息填写表单代码
喜欢 ()分享 (0)