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; /* 鼠标悬停时的宽度 */
}
相关推荐
写不来代码的草莓熊几秒前
vue前端面试题——记录一次面试当中遇到的题(3)
前端·javascript·vue.js
道可到11 分钟前
写了这么多代码,你真的在进步吗??—一个前端人的反思与全栈突围路线
前端
凡大来啦30 分钟前
v-for渲染的元素上使用ref
前端·javascript·vue.js
道可到32 分钟前
前端开发的生存法则:如何从“像素工人”进化为价值创造者?
前端
中微子43 分钟前
TypeScript 泛型与 ReturnType 详解
前端
我叫张得帅43 分钟前
从零开始的前端异世界生活--003--“探究Domain,DNS,Hosting”
前端
一大树1 小时前
H5在不同操作系统与浏览器中的兼容性挑战及全面解决方案
前端·ios
中微子1 小时前
TypeScript never 类型详解
前端
Strawberry_rabbit1 小时前
路由配置中的svg图标如何匹配
前端·css
练习前端两年半1 小时前
🔍 你真的会二分查找吗?
前端·javascript·算法