初学HTML:采用CSS绘制一幅夏天的图

下面代码使用了HTML和CSS来绘制一幅炎炎夏日吃西瓜的画面。其中,使用了伪元素和阴影等技巧来实现部分效果。

html 复制代码
<!DOCTYPE html>
<html>
<head>
	<title>炎炎夏日吃西瓜</title>
	<style>
		body {
			background-color: #add8e6; /* 背景颜色 */
		}

		.sun {
			position: absolute;
			top: 50px;
			right: 50px;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #ffff00; /* 太阳颜色 */
			box-shadow: 0 0 50px #ffff00; /* 太阳光晕 */
		}

		.grass {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100px;
			background-color: #90ee90; /* 草地颜色 */
		}

		.watermelon {
			position: absolute;
			top: 200px;
			left: 150px;
			width: 300px;
			height: 200px;
			background-color: #228b22; /* 西瓜皮颜色 */
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 0 50px #228b22; /* 西瓜皮光晕 */
		}

		.watermelon:after {
			content: "";
			display: block;
			position: absolute;
			top: 20px;
			left: 20px;
			width: 260px;
			height: 160px;
			background-color: #ff4500; /* 西瓜肉颜色 */
			border-radius: 50%;
			box-shadow: 0 0 50px #ff4500; /* 西瓜肉光晕 */
		}

		.person {
			position: absolute;
			bottom: 100px;
			right: 200px;
			width: 100px;
			height: 150px;
			background-color: #ffdab9; /* 人的皮肤颜色 */
			border-radius: 50%;
			box-shadow: 0 0 50px #ffdab9; /* 人的皮肤光晕 */
		}

		.person:before {
			content: "";
			display: block;
			position: absolute;
			top: 30px;
			left: 20px;
			width: 60px;
			height: 60px;
			background-color: #ffffff; /* 眼睛颜色 */
			border-radius: 50%;
			box-shadow: 0 0 20px #ffffff; /* 眼睛光晕 */
		}

		.person:after {
			content: "";
			display: block;
			position: absolute;
			top: 80px;
			left: 20px;
			width: 60px;
			height: 60px;
			background-color: #ff69b4; /* 嘴巴颜色 */
			border-radius: 0 0 50% 50%;
			transform: rotate(-45deg);
		}
	</style>
</head>
<body>
	<div class="sun"></div>
	<div class="grass"></div>
	<div class="watermelon"></div>
	<div class="person"></div>
</body>
</html>

其中包括太阳、草地、西瓜和人的身体。

对于每个元素,都使用了CSS来设置其样式:

  • body 设置了背景颜色为浅蓝色。
  • .sun 设置了太阳的样式,包括位置、大小、颜色和光晕。
  • .grass 设置了草地的样式,包括位置、大小和颜色。
  • .watermelon 设置了西瓜皮的样式,包括位置、大小、颜色、圆角和光晕。同时设置了 overflow: hidden,超出边界部分会隐藏。
  • .watermelon:after 使用伪元素 :after 来实现西瓜肉的样式,包括位置、大小、颜色、圆角和光晕。
  • .person 设置了人的身体的样式,包括位置、大小、颜色、圆角和光晕。
  • .person:before 使用伪元素 :before 来实现人的眼睛的样式,包括位置、大小、颜色和光晕。
  • .person:after 使用伪元素 :after 来实现人的嘴巴的样式,包括位置、大小、颜色、形状和旋转。

在 HTML 中,使用 div 元素来创建这些元素,并分别指定其对应的 CSS 类名。最终通过 HTML 和 CSS 的组合来实现一幅炎炎夏日吃西瓜的画面。

相关推荐
FØund40427 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
酷酷的威朗普30 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮33 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
一棵开花的树,枝芽无限靠近你44 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
土豆湿1 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鸽鸽程序猿4 小时前
【前端】CSS
前端·css
学不会•6 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
猫爪笔记12 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
爱上语文14 小时前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦15 小时前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html