如何用简易的HTML+简易的JS给你的头像戴一顶简易的圣诞帽
-
马上圣诞节了，我相信很多同学的头像已经戴上了圣诞帽
-
我之前也打算用PS给我的头像加一顶圣诞帽，但是想了想要不就用最简单的HTML给头像加上一顶吧
-
其实是我自己不会PS，哈哈哈
-
废话不多说，效果图
-
-
代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>圣诞帽</title> <style> *{ padding:0; margin:0; font-weight:bold; } #hat{ margin:0 auto; color:red; text-align:center; height:160px; /* 设置高度 */ 160px; /* 设置宽度 */ transform:rotate(-15deg); /* 设置旋转角度 */ position:relative; top:220px; /* 调节Y坐标 */ left:-80px; /* 调节X坐标 */ } .header{ height:640px; /* 给你头像设置高度 */ 640px; /* 给你头像设置宽度 */ margin:0 auto; } </style> </head> <body> <div id="hat" > </div> <div class="header"> <img src="header.jpg" /> <!-- 这里是图片的路径 --> </div> </body> <script> window.onload = function(){ var Hat = document.getElementById('hat'); //拿到hat var line = Hat.offsetHeight / 20; //拿到高度 并计算出需要多少行 var str = ""; for(var i = 0; i < line; i++){ //画帽子 for(var j = 0; j < i; j++){ str += '10'; //Hat.innerHTML += '10'; } if(i > line - 2 || i == 1){ Hat.innerHTML += '<p style="color:white;">' + str + '</p>'; }else{ Hat.innerHTML += '<p>' + str + '</p>'; } str = ''; } }; </script> </html> -
如果你觉得好玩，又不想自己再写一份
-
那么你用我的只需要改img标签的src 以及自己挪动一下帽子的位置即可（在css里面的hat改就OK了）