使用html+css制作方块运动时间为5s且重复运动的动画

Ⅰ、问题描述：

使用html+css实现方块规律移动；
**要求：**将方块轨迹设置成为在一个矩形内移动，设置运行时间为5s的重复运动；

Ⅱ实现过程如下：

1、运行软件VScode，亲测可实现；
2、运行代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}.box {position: absolute;/* 绝对定位； */width: 100px;height: 100px;left: 0;top: 0;background: red;animation: run 5s cubic-bezier(0, 0, 0, 1.25) 1s infinite alternate;/* 在动画的执行中:run("animation-name")指：@keyframes定义，即动画的定义名称；"5s"("animation-duration")指：动画持续的时间；"cubic-bezier(0, 0, 0, 1.25)"("animation-timing-function")指：时间函数；"1s"("animation-delay")指：动画延迟时间；"infinite"指：无限制的播放；"alternate"指：反向播放； */}@-o-keyframes run {/*定义动画：关键帧；  */0%,100%{left:0;top:0;}     /* 动画在起点与终点的位置； */25% {left:200px;top:0;}    /* 动画运行到25%时的位置(相对于起点)：向右移动200px; */50% {left:200px;top:200px;}/* 动画运行到50%时的位置(相对于起点)：向右移动200px，向下移动了200px;*/75% {left:0;top:200px;}    /* 动画运行到75%时的位置(相对于起点)：向下移动200px; */}@-webkit-keyframes run {0%,100% {left:0;top:0;}25% {left:200px;top:0;}50% {left:200px;top:200px;}75% {left:0;top:200px;}}@-moz-keyframes run {0%,100% {left:0;top:0;}25% {left:200px;top:0;}50% {left:200px;top:200px;}75% {left:0;top:200px;}}@-ms-keyframes run {0%,100% {left:0;top:0;}25% {left:200px;top:0;}50% {left:200px;top:200px;}75% {left:0;top:200px;}}@keyframes run {/* 标准用法； */0%,100% {left:0;top:0;}25% {lefft:200px;top:0;}50% {left:200px;top:200px;}75% {left:0;top:200px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

3、结果展示：

其结果为一个从左上角，到右上角，到右下角，到左下角，再回左上角的动画过程；
顺时针移动一圈，再逆时针移动一圈的重复运动;

Ⅲ、注意：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！

使用html+css制作方块运动时间为5s且重复运动的动画相关推荐

HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
HTML+CSS制作3D步数统计界面
HTML+CSS制作3D步数统计界面效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans">&l ...
CSS制作舞台聚光灯效果
今天依靠纯CSS来制作一个舞台聚光灯效果,先看效果图 html{font-size: 15px;}body{background-color: #222;/* 为body设置使我们的h1垂直水平居中 ...
svg配合css3动画_如何使用CSS制作节日SVG图标动画
svg配合css3动画正是这个季节,因此在本教程中,我将逐步创建一些CSS动画,以假日为主题的SVG图标. Iconmelon上有一些很棒的图标,该网站上有许多免费的矢量图标集,可让您尽其所能 . ...
html+css制作圣诞树
圣诞节到来,看到网上多种多样的圣诞树,作为程序员也想用代码制作一棵圣诞树出来,于是用html+css做了一个圣诞树的网页送给朋友 html代码 <!DOCTYPE html> <ht ...
HTML+CSS制作DNA双螺旋结构
HTML+CSS制作DNA双螺旋结构效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...

使用html+css制作方块运动时间为5s且重复运动的动画

Ⅰ、问题描述：

Ⅱ实现过程如下：

3、结果展示：

Ⅲ、注意：

使用html+css制作方块运动时间为5s且重复运动的动画相关推荐

最新文章

热门文章