如何用简易的HTML+简易的JS给你的头像戴一顶简易的圣诞帽

如何用简易的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;				/* 设置高度 */
				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了）

posted @ 2019-12-24 20:59  南小树  阅读(445)  评论(0)  编辑  收藏  举报