LSQZrzyAPP/js/animation.js

/**
 * 创建者：王成
 * 创建日期：2022年4月15日
 * 描述：动画脚本
 * 要求：该脚本需要JQuery脚本的支持，请提前引入
 */

function appendBorderAnimation(className) {
	/* 根据类名称组合选择器 */
	var selector = "." + className;
	/* 各元素添加必须属性 */
	$(selector).css("overflow", "hidden");
	/* 获取元素的宽度和高度 */
	var width = $(selector).width();
	var height = $(selector).height();
	console.log("宽度=" + width + " 高度=" + height);
	/* 添加边框div */
	var domBorder = document.createElement('div');
	$(selector).prepend(domBorder);
	/* 添加内容div */
	var domContent = document.createElement('div');
	$(selector).prepend(domContent);
	/* 设置边框样式 */
	var childBorder = "." + className + " >div:nth-child(1)";
	$(childBorder).css("position", "relative");
	$(childBorder).css("width", "0");
	$(childBorder).css("height", "0");
	$(childBorder).css("border-top", height + "px solid green");
	$(childBorder).css("border-right", width + "px solid rgba(255,255,255,0)");
	$(childBorder).css("border-bottom", height + "px solid green");
	$(childBorder).css("border-left", width + "px solid rgba(255,255,255,0)");
	$(childBorder).css("left", "-" + width / 2 + "px");
	$(childBorder).css("top", "-" + height / 2 + "px");
	$(childBorder).css("animation", "rotate 5s linear infinite");
	/* 设置内容样式 */
	var childContent = "." + className + " >div:nth-child(2)";
	$(childContent).css("position", "absolute");
	$(childContent).css("top", "4px");
	$(childContent).css("right", "4px");
	$(childContent).css("bottom", "4px");
	$(childContent).css("left", "4px");
	$(childContent).css("background-color", "rgba(128,128,128,0)");
}

function appendLineAnimation(className) {
	/* 根据类名称组合选择器 */
	var selector = "." + className;
	/* 获取元素的宽度和高度 */
	var width = $(selector).width();
	var height = $(selector).height();
	/* 修改变量 */
	document.documentElement.style.setProperty('--width', (parseInt(width) + 20) + 'px');
	document.documentElement.style.setProperty('--left', (parseInt(width) - 2) + 'px');
	document.documentElement.style.setProperty('--height', (parseInt(height) + 20) + 'px');
	document.documentElement.style.setProperty('--bottom', (parseInt(height) - 2) + 'px');
	/* 添加属性 */
	var css = "<style>" + selector + "::before," + selector + "::after{";
	css += "position: absolute;";
	css += "top: 0;";
	css += "bottom: 0;";
	css += "left: 0;";
	css += "right: 0;";
	css += "content: '';";
	// css += "z-index: -1;";
	css += "margin: -6px;";
	css += "box-shadow: inset 0 0 0 2px;";
	css += "-webkit-animation: clipMe 8s linear infinite ;";
	css += "}</style>";
	$(selector).append(css);
	$(selector).append("<style>" + selector +"::before{-webkit-animation-delay: -4s;}</style>");
}