CSS3实现移动效果

最新推荐文章于 2023-08-07 19:43:58 发布

少年游四方

最新推荐文章于 2023-08-07 19:43:58 发布

阅读量1.5k

点赞数 1

分类专栏： # Web技术应用基础——CSS 文章标签： html css3

本文链接：https://blog.csdn.net/qq_45823118/article/details/114984811

版权

Web技术应用基础——CSS 专栏收录该内容

13 篇文章 21 订阅

订阅专栏

CSS3实现移动效果

任务描述
相关知识

任务描述

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

相关知识

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

transform属性
transition属性。

transform属性

下面是基本的html结构，：

<div class="move">
    <p>向上移动</p>
</div>

效果如下：
在这里插入图片描述
现在需要平滑的往上移动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>

少年游四方

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3实现移动效果

CSS3实现移动效果任务描述相关知识transform属性transition属性代码文件任务描述本关任务：用CSS3实现物体移动效果。相关知识为了完成本关任务，你需要掌握：transform属性transition属性。transform属性下面是基本的html结构，：<div class="move"> <p>向上移动</p></div>效果如下：现在需要平滑的往上移动200px。该如何实现呢？咱们先实现往上移动
复制链接

扫一扫