css 常用动画效果

css 常用动画效果

文章目录

1.上下运动动画

html 复制代码
 <div class="box">
  <div class="item"></div>
</div>
  • css
css 复制代码
.box {
  position: relative;
}

.item {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  top: 18px;
  animation: move-up-and-down 2s linear infinite;
}

@keyframes move-up-and-down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

2.宽度变化动画

css 复制代码
div {
  width: 50px; 
  height: 20px; 
  background-color: #ccc; 
  transition: width 1s; /* 宽度变化效果,过渡时间为1秒 */
}
div:hover {
  width: 200px; /* 鼠标悬停时的宽度 */
}
相关推荐
满分观察网友z1 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构7 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙14 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1115 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆19 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er24 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0627 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444029 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆30 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子33 分钟前
Web开发中的文件下载
前端·javascript·面试