css3实现盒子运动，由上向下移动200px

最新推荐文章于 2024-06-09 23:08:20 发布
最新推荐文章于 2024-06-09 23:08:20 发布
阅读量9.1k 收藏 11
点赞数 2
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/this_name_true/article/details/86099692
版权

效果如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Text3盒子运动</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.main{
				position: relative;
				width: 500px;
				height: 500px;
				border: 5px solid pink;
				margin: 20px auto;
				border-radius: 4px;
			}
			.move{
				position: absolute;
				width: 100px;
				height: 100px;
				background: -webkit-linear-gradient(left,#e65786,#e0c8ba);
				border-radius: 10px;
				text-align: center;
				line-height: 50px;
				-webkit-animation: 5s move;
				animation-fill-mode: forwards;
				color: white;
			}
			
			@-webkit-keyframes move{
				0%{
					left: 0px;
					top: 0px;
				}
				/*25%{
					left: 200px;
					top: 100px;
				}
				50%{
					left: 400px;
					top: 0px;
				}
				75%{
					left: 200px;
					top: 400px;
				}*/
				100%{
					left: 0px;
					top: 200px;
				}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="move">
				我是一只会动的盒子
			</div>
		</div>
		
	</body>
</html>

 

 

Lurkers.
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3------盒模型
m0_59749255的博客
11-25 1575
内边距是用来改变内容位置，由于默认页面的布局方向是从上到下，从左到右的。内边距是用来改变内容位置，由于默认页面的布局方向是从上到下，从左到右的。属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将垂直方向上的相邻盒子向下推。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将垂直方向上的相邻盒子向下推。盒子自身不动，将垂直方向上的相邻盒子向下推。
css盒子模型_CSS 盒子模型(Box Model)
weixin_39637661的博客
11-29 57
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：margin(外边距) - 清除边框外的区域，外边距是透明的。border(边框) - 围绕在内边距和内容...
让你的网页动起来:Javascript+CSS拖曳盒子指南
最新发布
云加速
06-09 70
让网页上的元素具有拖拽功能，可以提升用户体验，尤其是在需要用户交互的场景中。下面是一个使用JavaScript和CSS来实现拖拽效果的基本指南。
CSS如何动态下拉div盒子、移动div盒子和展开div盒子
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-18 1678
css是层叠样式表，是一种用于网页设计的语言，它可以为HTML和XML文档添加样式和布局。我们通过css可以控制文本的颜色、字体大小、字体间距等等。css是强大的工具，它可以使我们的网页更加的美观，提高用户的阅读体验！动态下拉、移动和动态移动展开。
盒子移动
koukou0419的博客
06-02 489
<div style="background-color: green;width:200px;height:100px;position:absolute;left:0;top:0"></div> <script> //让盒子移动 //获取当前盒子的left和top值（getComputedStyele(elem,null).left），然后再这基础之...
html5把盒子向下移动,IT兄弟连 HTML5教程 盒子区块框的定位
weixin_29133981的博客
06-03 1541
原标题：IT兄弟连 HTML5教程 盒子区块框的定位 区块的定位有普通流、绝对定位和浮动三种基本的定位机制。如果不是专门指定区块的位置，默认都是在普通流中定位，即从上到下一个接一个地排列，位置由元素在HTML中的位置决定。如果使用像span和strong等不自动换行的行内元素，就会在一行中水平布局。可以通过使用水平填充、外部边距等调整它们的水平间距。1 相对定位相对定位通常会被看作普通流定位的一部...
css控制元素高度实现自底向上和自顶向下的方法
09-24
本文主要探讨了两种方法：自底向上和自顶向下，来实现元素高度的控制，尤其针对如何使元素高度与浏览器内容窗口高度保持一致。 首先，我们可以使用CSS中的视口高度单位 vh 来实现元素高度占满屏幕。`100vh` 表示...
js实现盒子移动动画效果
10-14
这个例子展示了如何通过JavaScript控制CSS属性来实现一个简单的动画，使一个带有红色边框的盒子在页面上前后移动。下面我们将深入探讨实现这一效果的关键知识点。 1. **CSS样式**： - `.box` 类设置了一个200x200...
js实现上下左右键盘控制div移动
10-15
// 移动10像素向下 break; } }); ``` 在这个例子中，我们首先监听`keydown`事件，当用户按下键盘时，会触发这个事件。然后，我们根据按键码（keyCode）判断按下的箭头键，并相应地调整div的`left`和`top`样式...
CSS-3D盒子
02-18
CSS3D盒模型基于笛卡尔坐标系，其中X轴从左到右，Y轴从下到上，Z轴则从屏幕向内。通过调整元素在这些轴上的位置，可以实现各种复杂的3D效果。 **三、3D变换实例** 1. **旋转**：利用`rotate3d(x, y, z, angle)`，...
纯CSS3实现的阴影效果
09-25
- `h-offset` 和 `v-offset` 分别代表水平和垂直偏移量，正数值向右/下移动，负数值向左/上移动。 - `blur-radius` 可选，表示阴影的模糊程度，数值越大，阴影边缘越模糊。 - `color` 是阴影的颜色，可以使用 RGB、...
html新建盒子,html 盒子模型
weixin_42298081的博客
06-04 663
盒子CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里。为什么要想象成盒子呢？因为如果把所有的元 素都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。盒子模型一个盒子我们会分成几个部分：内容区(content)内边距(padding)边框(border)外边距(margin)捕获.PNG内容区内容区指的是盒子中放置内...
html让一个盒子往下走代码,web前端学习笔记(CSS盒子的浮动)
weixin_39850143的博客
06-08 1890
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。准备基础代...
Html盒子（相对定位、绝对定位）和用鼠标悬停把层叠的盒子显示下层的
weixin_68967484的博客
04-13 867
学校布置的作业 效果图 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 680px; heig.
文档流定义，盒子模型相关知识
qq_62917168的博客
06-24 206
文档流（normal flow） 网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层 文档流是网页最底层 我们创建的元素默认情况下，都在文档流中 元素分为两种状态：在文档流中，脱离文档流 元素在文档流中的特点 块元素 1:会独占一行 2:块元素的宽度默认是父元素的100% 3:块元素的高度默认是被
CSS中使盒子移动方法总结
热门推荐
Thekuuuu的博客
12-09 1万+
个人学习CSS时使用盒子移动的方法总结，简单好用～
jQuery实现向左向右单移动全移动，向上向下功能
04-20 175
亲测有效，直接复制保存用浏览器打开可以实现功能1 1 <head> 2 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 3 <script> 4 $(function(){ 5 //单选（向右移动数据） 6...
CSS3使div盒子上下移动
zqxqiyun的博客
10-23 9030
CSS3使div盒子上下移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
html盒模型向上浮动,HTML5盒模型、浮动和定位
weixin_42447681的博客
06-03 3475
在此之前我们先了解一下块级元素和行内元素的区别一、块级元素1、总是从新的一行开始2、高度、宽度都是可控的3、宽度没有设置时，默认为100%4、块级元素中可以包含块级元素和行内元素二、行内元素1、和其他元素都在一行2、高度、宽度以及内边距都是不可控的3、宽高就是内容的高度，不可以改变4、行内元素只能行内元素，不能包含块级元素三、盒模型 1、盒模型简单示意图边框border： 宽度 px 、 边形 ：...
css让div盒子上下左右移动的代码
06-01
您可以使用CSS中的position和top、bottom、...同样的，要使div向下移动10像素，可以使用以下代码： ``` div { position: relative; top: 10px; } ``` 您可以根据需要调整left和top的值来控制div的移动方向和距离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值