练习demo
编辑器制作效果展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {overflow: hidden}
div {transition: all 1s;animation: run 3s infinite;font-size: 16px;text-align: center}
div:hover {background-color: deeppink !important;transform: scale(1.2) !important;animation: run 0s;transition: all 2s}
body:active div {background-color: white !important;transform: rotate(-180deg) scale(0.5) translate(300px, 100px) !important;transition: all 1s}
@keyframes run {
from {transform: rotate(0deg)}
35% {transform: rotate(75deg)}
65% {transform: rotate(-45deg)}
to {transform: rotate(90deg)}
}
</style>
</head>
<body>
<script>
var odd;
// 生成盒子随机颜色
function crcolor() {
var color = "#";
for (var i = 0; i < 3; i++) {
var str = parseInt(Math.random() * 256);
if (str < 16) {
str = "0" + str.toString(16);
} else {
str = str.toString(16);
}
color += str;
}
return color;
}
var bol = true;
document.addEventListener("click", click);
// 显示与移除
function click() {
if (bol) {
var od = "";
for (var i = 0; i < 150; i++) {
// od+="<div style="+crdiv()+">李佳霖</div>";
od += "<div style=" + crdiv() + "></div>";
document.body.innerHTML = od;
// document.body.innerHTML+=od;
// document.write(od);
run();
}
bol = false;
} else {
for (var i = 0; i < odd.length; i++) {
setTimeout(function () {
odd[i].remove();
}, 10)
}
bol = true;
}
}
// z-index的优先显示
function run() {
odd = document.querySelectorAll("div");
for (var i = 0; i < odd.length; i++) {
odd[i].addEventListener("mouseover", runing);
function runing() {
// this.style.backgroundColor="white";
this.style.zIndex = 1;
}
odd[i].addEventListener("mouseout", runin);
function runin() {
// this.style.backgroundColor="";
this.style.zIndex = 0;
}
}
}
// 盒子的随机生成分布
function crdiv() {
var v = parseInt(Math.random() * 200) + "px";
var v1 = parseInt(Math.random() * 1400) + "px";
var v2 = parseInt(Math.random() * 720) + "px";
var backcolor = crcolor();
var divstyle = 'width:' + v + ';height:' + v + ';background-color:' + backcolor + ';position:absolute;left:' + v1 + ';top:' + v2;
return divstyle;
}
</script>
</body>
</html>
整理笔记时发现自己做的小demo,传上来了，么么哒！