马上圣诞节了，我相信很多同学的头像已经戴上了圣诞帽
我之前也打算用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; /* 设置高度 */
width:160px; /* 设置宽度 */
transform:rotate(-15deg); /* 设置旋转角度 */
position:relative;
top:220px; /* 调节Y坐标 */
left:-80px; /* 调节X坐标 */
}
.header{
height:640px; /* 给你头像设置高度 */
width: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了）
如何用简易的HTML+简易的JS给你的头像戴一顶简易的圣诞帽
原文：https://www.cnblogs.com/nanke33/p/12093532.html