使用jQuery加布局方式画一棵圣诞树，带闪烁霓虹灯效果

<meta charset="utf-8"> <script src="jquery.21.js"></script> <style type="text/css"> .area-div { position: relative; width: 500px; height: 700px; margin: 0 auto; box-shadow: 0 0 13px #ccc; } .area-div .tree-root-div { width: 11px; background-color: #957161; height: 600px; position: absolute; top: 50px; left: 50%; margin-left: -5px; } .area-div .tree-node-div { position: absolute; bottom: 0; left: 0; height: 0; width: 0; border-color: green; border-style: solid; position: absolute; border-width: 5px 5px 0 0; transform: rotate(-45deg); } .area-div .tree-node-div .arrow-left-div { position: absolute; top: 0; left: 0; height: 0; width: 0; border-color: green; border-style: solid; position: absolute; border-width: 3px 3px 0 0; transform: rotate(45deg); } .area-div .tree-node-div .arrow-right-div { position: absolute; top: 0; right: 0; height: 0; width: 0; border-color: green; border-style: solid; position: absolute; border-width: 3px 3px 0 0; transform: rotate(-45deg); } /*五角星*/ .big-star-div { position: absolute; top: 0; left: 213px;z-index:20221213; width: 0; height: 0; border-style: solid; border-color: transparent transparent #9f1b1c transparent; border-width: 35px 50px; transform: rotate(35deg); } .big-star-div::before { position: absolute; content: ''; width: 0; height: 0; top: -64px; left: -48px; border-style: solid; border-color: transparent transparent #9f1b1c transparent; border-width: 40px 15px; transform: rotate(-35deg); } .big-star-div::after { position: absolute; content: ''; width: 0; height: 0; top: -23px; left: -70px; border-style: solid; border-color: transparent transparent #9f1b1c transparent; border-width: 35px 50px; transform: rotate(-70deg); } /*小圆球*/ .qiu-div { position: absolute; top: 100px; left: 50%; margin-left: -10px; width: 20px; height: 20px; border-radius: 20px; background: #9f1b1c; z-index: 999; background-image: linear-gradient(45deg,#fff, #9f1b1c); } .qiu-div-left { position: absolute; top: -13px; left: -17px; width: 20px; height: 20px; border-radius: 20px; background: #9f1b1c; z-index: 999; background-image: linear-gradient(45deg,#fff, #9f1b1c); } .qiu-div-right { position: absolute; bottom: -13px; right: -13px; width: 20px; height: 20px; border-radius: 20px; background: #9f1b1c; z-index: 999; background-image: linear-gradient(45deg,#fff, #9f1b1c); } </style> <div class="area-div"> <div style="width:100px;height:60px;line-height:60px;text-align:center;">圣诞树</div> <!--树主根--> <div class="tree-root-div"></div> <!--五角星--> <div class="big-star-div"></div> <!--小圆球--> <div class="qiu-div qiu-div1"></div> <div class="qiu-div qiu-div2" style="top:175px;"></div> <div class="qiu-div qiu-div3" style="top:250px;"></div> <div class="qiu-div qiu-div4" style="top:320px;"></div> <div class="qiu-div qiu-div5" style="top:390px;"></div> </div> <script type="text/javascript"> $(function () { var areaWidth = 500; var areaHeight = 700; var unitValue = 20; var bottomValue = 0; var leftValue = 0; var divSize = 300; for (var i = 0; i < 6; i++) { // 6根树枝 var szDiv = $('<div class="tree-node-div"></div>'); var width = divSize - i * (unitValue + 20); var height = width; var bottom = (i * (unitValue + 100) - 70); var left = (areaWidth - width) / 2 - 2; szDiv.css({ "width": width + "px", "height": height + "px", "bottom": bottom + "px", "left": left + "px" }); // 左边小树枝（小箭头） var length = (i == 5 ? 3 : i == 4 ? 5 : i == 3 ? 6 : i == 2 ? 7 : 10 - i); for (var j = 0; j < length; j++) { var szDiv2 = $('<div class="arrow-left-div"></div>'); var width2 = 20; var height2 = width2; var top2 = -14; var left2 = j * 30; szDiv2.css({ "width": width2 + "px", "height": height2 + "px", "top": top2 + "px", "left": left2 + "px" }); szDiv.append(szDiv2.prop('outerHTML')); } szDiv.append('<div class="qiu-div-left"></div>'); // 右边小树枝（小箭头） for (var j = 0; j < length; j++) { var szDiv2 = $('<div class="arrow-right-div"></div>'); var width2 = 20; var height2 = width2; var top2 = j * 30; var right2 = -14; szDiv2.css({ "width": width2 + "px", "height": height2 + "px", "top": top2 + "px", "right": right2 + "px" }); szDiv.append(szDiv2.prop('outerHTML')); } szDiv.append('<div class="qiu-div-right"></div>'); $(".area-div").append(szDiv.prop('outerHTML')); } // 随机颜色 setInterval(function () { // 五角星 var color = getRgb(0, 255); $('.big-star-div').css({ "borderColor": "transparent transparent " + color + " transparent" }); $('.big-star-div').html("<style>.big-star-div::before{border-color:transparent transparent " + color + " transparent}</style>"); $('.big-star-div').append("<style>.big-star-div::after{border-color:transparent transparent " + color + " transparent}</style>"); }, 500 + Math.random() * 500); setInterval(function () { // 竖线小圆球 $('.qiu-div1').css({ "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" }); $('.qiu-div2').css({ "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" }); $('.qiu-div3').css({ "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" }); $('.qiu-div4').css({ "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" }); $('.qiu-div5').css({ "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" }); }, 200 + Math.random() * 800); setInterval(function () { // 左右两边小圆球 for (var i = 0; i < 6; i++) { $('.qiu-div-left').eq(i).css({ "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" }); $('.qiu-div-right').eq(i).css({ "background-image": "linear-gradient(45deg," + getRgb(0, 255) + ", " + getRgb(0, 255) + ")" }); } }, 200 + Math.random() * 500); function getRgb(min, max) { var r = Math.floor(Math.random() * (max - 0 + 1)) + min; var g = Math.floor(Math.random() * (max - 0 + 1)) + min; var b = Math.floor(Math.random() * (max - 0 + 1)) + min; return 'rgb(' + r + ',' + g + ',' + b + ')'; } }); </script>