您的位置: 首页  >  文章  >  用CSS3实现移动效果

用CSS3实现移动效果

分类: 文章 • 2023-04-01 19:57:17

任务描述

本关任务：用CSS3实现物体移动效果。

效果如下：

用CSS3实现移动效果

相关知识

为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。

transform属性

下面是基本的html结构，：

  1. <div class="move">
  2. <p>向上移动</p>
  3. </div>

效果如下：

用CSS3实现移动效果

现在需要平滑的往上移动200px。
效果如下：

用CSS3实现移动效果

该如何实现呢？
咱们先实现往上移动200px，用到了 transform属性。

如上面所说，添加如下代码：

  1. .move:hover{
  2. border: 2px solid #000;
  3. }
  4. .move:hover p{ /*注意是给 p 添加的*/
  5. transform : translate(0, -200px);
  6. }

效果如下：

用CSS3实现移动效果

基本用法：
transform: translate(x,y);

参数详解：

  • x 表示左右移动，正数表示向右移动，负数表示向左移动；
  • y 表示上下移动，正数表示向下移动，负数表示向上移动；

transition属性

基本效果已经实现了，就是有点突兀，如何平滑的过渡呢？这里用到了transition属性。

添加如下代码：

  1. .move p{
  2. transition: all 1s linear;
  3. }

效果如下：

用CSS3实现移动效果

这就已经实现了。这里解释一下上面的参数：

  • all指所有属性，包括width，height；

  • 1s指过渡效果花费的时间；

  • linear指过渡效果的时间曲线，这里是平滑过渡。默认是 "ease"，先慢再快最后慢。

编程要求

在右侧编辑器中，补全Begin至End中间的部分，按照提示完成代码：

  • .nav-info向上移动10px；

  • 给.nav-info所有属性添加0.3s的平滑过渡效果(linear),不考虑兼容性。

注意：

  • 这里的 0px不用加px，直接写0即可；

  • 这里用 0.3s，不用.3s；

  • 这些只是为了方便评测做的规范；

效果如下：

用CSS3实现移动效果

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>少儿教育</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			a {
				color: #888888;
				text-decoration: none;
				font-size: 16px;
			}
			
			body {
				background: #f7f7f7;
				position: relative;
			}
			
			#nav {
				width: 100%;
				margin: 0 auto;
				padding: 40px 0;
			}
			
			#nav .nav-item {
				width: 21%;
				height: auto;
				text-align: center;
				color: #ff7415;
				padding-top: 10px;
				float: left;
				transition: all .3s ease-in;
				-moz-transition: all .3s ease-in;
				-webkit-transition: all .3s ease-in;
			}
			
			#nav .nav-item:not(:last-child) {
				margin-right: 28px;
			}
			
			#nav .nav-item:hover {
				border: 1px solid #FF7415;
			}
			/*----------  Begin  -----------*/
			#nav .nav-item:hover .nav-info {
				/*向上移动10px*/
				transform:translate(0,-10px);
				
			}
	
			#nav .nav-item .nav-info {
				/*给所有属性添加0.3s的 平滑过滤效果(linear),不考虑兼容性*/
				transition:all 0.3s linear;

			}
			/*------------ End --------------*/
			
			#nav .nav-item img {
				width: 64px;
				height: 64px;
				margin: 20px auto;
			}
			
			#nav .nav-item .nav-title {
				font-size: 22px;
				margin-bottom: 12px;
			}
		</style>
	</head>

	<body>
		
			<div id="nav">
				<div class="nav-item">
					<div class="nav-info">
						<img src="https://www.educoder.net/attachments/download/198536" alt="cecorate" />
						<p class="nav-title">儿童装饰画</p>
						<p>装饰</p>
					</div>
				</div>
				<div class="nav-item">
					<div class="nav-info">
						<img src="https://www.educoder.net/attachments/download/198538" alt="cecorate" />
						<p class="nav-title">趣味素描</p>
						<p>sketch</p>
					</div>
				</div>
				<div class="nav-item">
					<div class="nav-info">
						<img src="https://www.educoder.net/attachments/download/198539" alt="cecorate" />
						<p class="nav-title">漫画阅读</p>
						<p>comic</p>
					</div>
				</div>
				<div class="nav-item">
					<div class="nav-info">
						<img src="https://www.educoder.net/attachments/download/198537" alt="cecorate" />
						<p class="nav-title">手工制作</p>
						<p>manual</p>
					</div>
				</div>
			</div>
	
	</body>

</html>

 

相关推荐