CSS上下悬浮特效

要实现一个上下悬浮的特效,可以使用CSS的@keyframes规则和动画属性。以下是一个简单的示例:

代码示例

复制代码
/* 定义一个名为floating的动画 */
@keyframes floating {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  50% {
    transform: translateY(-4px); /* 向上移动4像素 */
  }
  100% {
    transform: translateY(0); /* 回到初始位置 */
  }
}

/* 应用动画到指定的元素 */
.element {
  animation: floating 2s ease infinite; /* 动画名称、持续时间、缓动函数、循环次数 */
}

代码描述

在这个示例中,我们定义了一个名为floating的动画,它会在2秒内完成一次完整的上下浮动。动画的起始状态是元素的原始位置(translateY(0)),中间状态是向上移动4像素(translateY(-4px)),最后状态是回到原始位置。通过将这个动画应用到一个具有.element类的元素上,我们可以实现上下悬浮的效果。

运行结果

相关推荐
不想上班只想要钱1 小时前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
Li_Ning211 小时前
为什么 Vite 速度比 Webpack 快?
前端·webpack·node.js
2501_915373881 小时前
Electron 入门指南
前端·javascript·electron
同志327132 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟2 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境2 小时前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu3 小时前
Github Action + docker 实现自动化部署
前端·自动化运维
关山3 小时前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i3 小时前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨3 小时前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值