CSS3实现移动效果

﹏ヽ暗。殇╰゛Y 2021-05-16 20:37 572阅读 0赞

### CSS3实现移动效果 ###

*  任务描述
 *  相关知识
 *   *  transform属性
     *  transition属性
     *   *  代码文件

# 任务描述 #

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

# 相关知识 #

为了完成本关任务，你需要掌握：

1.  transform属性
2.  transition属性。

## transform属性 ##

下面是基本的html结构，：

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]  
现在需要平滑的往上移动`200px`。  
该如何实现呢？  
咱们先实现往上移动`200px`，用到了 `transform`属性。

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

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

基本用法：

transform: translate(x,y);

参数详解：

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

## transition属性 ##

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

添加如下代码：

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

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

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

### 代码文件 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/6ce02091ffeb4278afc335f8f1d28d37.png