css3如何实现弹跳效果

 时间:2026-02-14 23:40:48

1、打开编辑器,新建test.html页面,用于学习今天的内容

css3如何实现弹跳效果

2、在页面的body区域,新建一个div,给div加上class,叫做study,用来测试今天的内容

css3如何实现弹跳效果

3、在页面head标签下方写上<style></style>,在<style>标签内给test加上样式

css3如何实现弹跳效果

4、在<style>标签内写弹跳规则

css3如何实现弹跳效果

5、在<style>标签内把弹跳规则绑定到div上

css3如何实现弹跳效果

6、在浏览器中打开test.html,查看实现效果

css3如何实现弹跳效果

7、此处贴一下代码,以供参考:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css3如何实现弹跳效果</title>

<style>

.test {

width: 50%;

text-align: center;

margin: 50px auto;

}

.test {

animation: myfirst 2s infinite;

}

@keyframes myfirst {

0% {

transform: translate(0px, 0px);

}

50% {

transform: translate(0px, -10px);

}

100% {

transform: translate(0px, 0px);

}

}

</style>

</head>

<body>

<div class="test">

aaaa

</div>

</body>

</html>

  • 淘宝店铺固定背景代码
  • 淘宝怎么添加全屏轮播海报
  • 【更新】关于淘宝店铺全屏轮播图制作代码的方法
  • 淘宝系统自带的全屏轮播怎样使用
  • 如何设计淘宝网店首页?
  • 热门搜索
    最漂亮普通话手抄报 最美少年手抄报 六一儿童节手抄报内容资料 三年级上册手抄报 五一节的手抄报 国学经典手抄报内容 英语手抄报的英文 七十周年手抄报 数学手抄报内容三年级 安全伴我行手抄报图片