Tomcat jetbrains Java Out Of Memory 做推广 方法 jdbc jquery的点击事件 jquery对象 js获取数组第一个元素 matlab网页版 python循环语句 python学习教程 python网页编程 java编程入门 学习java基础 java定义变量 java网课 php实例教程 音频录制软件 msdev 脚本之家官网 方正兰亭字体下载 tampermonkey 华为手机刷公交卡 ajaxpro 沉沦之城 vc运行库合集 qq悄悄话怎么知道对方是谁 红米3和红米3s的区别 qt5下载 水之td合成 xfce4 情头污系 彩虹魔药 cad标题栏 hscan mmc无法创建管理单元 iphone常去地点怎么查看 狼人杀游戏规则 java苹果手机怎么发彩信
当前位置: 首页 > 学习教程  > 编程语言

慕课网 前端就业班 CSS3实现汉克狗案例 项目作业

2020/9/19 14:39:14 文章标签:

作业

小伙伴们,我们学习了 CSS3中的转换、过渡和动画等知识,那么现在我们来运用所学的知识绘制一幅美丽的蓝天白云绿草,小兔嬉耍的美景吧!

任务描述

1、整体分块:

1)构建两个div元素,一个是蓝天,一个是草地,要求全屏显示,蓝天高度:草地高度=6:4。

2)第一个div命名为天空,并填充天空渐变色;第二个div命名为草地,并填充草地渐变色。

 天空的颜色为 rgb(196, 228, 253);

 草地的颜色为 rgb(148, 190, 89)

2、白云的布局

1)天空div里面构建五个子div,命名为云,每一个div控制大小、圆角和白色填充。

2)用子div的before和after伪元素转块元素,控制其大小、圆角、位置及其缩放等,填充白色,让其与云div一起组成云朵。

3)分别控制每一个云div,给予不同的缩放比例和位置,让其排列于天空不同位置。

 白云的颜色为 #FFFFFF,并且有不同的透明度。

3、白云动画的制作

1)定义云朵运动的动画关键帧。

2)给云朵元素绑定动画,分别对不同的云朵给予不同的动画运动周期。

3)白云透明度的设置

4、小兔子的制作

在草地div中插入小兔子图片。
在这里插入图片描述

提示:小兔子可以用绝对定位属性,放到距离底部50像素,距离右边200像素的位置。

参考代码

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css.css" />
	</head>
	<body>
		<div class="sky">
			<div class="cloud"></div>
			<div class="cloud"></div>
			<div class="cloud"></div>
			<div class="cloud"></div>
			<div class="cloud"></div>
		</div>
		<div class="grass"><img src="rabbit.png" /></div>
	</body>
</html>

CSS部分

* { margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; }
img { width: 16%; position: absolute; right: 200px; bottom: 50px; }
.sky   { width: 100%;  height: 60%;  background-image: linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255)); position: relative; overflow: hidden; }
.grass { width: 100%;  height: 40%;  background-image: linear-gradient(rgb(255, 255, 255), rgb(148, 190, 89)); }
.cloud { width: 200px; height: 60px; background-color: #ffffff; border-radius: 30px; position: absolute; }
.cloud::before { content: ''; display: block; width: 120px; height: 120px; background-color: #ffffff; border-radius: 50%;  transform: translate(60px, -50px); }
.cloud::after  { content: ''; display: block; width: 100px; height: 60px;  background-color: #ffffff; border-radius: 30px; transform: translate(10px, -120px) rotate(60deg); }
.cloud:nth-child(1) { top: 112px; animation: cloud_one 10s linear infinite; }
.cloud:nth-child(2) { top: 24px;  animation: cloud_two 16s linear infinite; transform: scale(.8); opacity: .7; }
.cloud:nth-child(3) { top: 200px; animation: cloud_thr 12s linear infinite; transform: scale(.8); opacity: .7; }
.cloud:nth-child(4) { top: 42px;  animation: cloud_for 12s linear infinite; transform: scale(.8); opacity: .7; }
.cloud:nth-child(5) { top: 170px; animation: cloud_fif 16s linear infinite; transform: scale(.6); opacity: .6; }
@keyframes cloud_one{ from{right: -380px;} to{right: 200%;} }
@keyframes cloud_two{ from{right: -200px;} to{right: 200%;} }
@keyframes cloud_thr{ from{right: -284px;} to{right: 200%;} }
@keyframes cloud_for{ from{right: -600px;} to{right: 200%;} }
@keyframes cloud_fif{ from{right: -648px;} to{right: 200%;} }


本文链接: http://www.dtmao.cc/news_show_200128.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?