用CSS3实现移动效果

灰太狼 2022-04-04 12:00 540阅读 0赞

任务描述

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

效果如下：

![196947][]

相关知识

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

transform属性

下面是基本的html结构，：

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

效果如下：

![196959][]

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

![196960][]

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

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

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

效果如下：

![196963][]

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

参数详解：

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

transition属性

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

添加如下代码：

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

效果如下：

![196960][]

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

*  `all`指所有属性，包括`width`，`height`；
 *  `1s`指过渡效果花费的时间；
 *  `linear`指过渡效果的时间曲线，这里是平滑过渡。默认是 `"ease"`，先慢再快最后慢。

编程要求

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

*  `.nav-info`**向上移动**`10px`；
 *  给`.nav-info`**所有属性**添加`0.3s`的**平滑过渡效果**`(linear)`,不考虑兼容性。

注意：

*  这里的 `0px`不用加`px`，直接写`0`即可；
 *  这里用 `0.3s`，不用`.3s`；
 *  这些只是为了方便评测做的规范；

效果如下：

![196947][]

<!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>

[196947]: /images/20220404/24f4c6999c8f4446aea4b87431bb0dd7.png
[196959]: /images/20220404/b3eb850b552041aa979988fe85588d8b.png
[196960]: /images/20220404/5fa4a29565a04b47aca152115d764d6d.png
[196963]: /images/20220404/0c965f651574453ab1f8534779d324fc.png