css 常用动画效果
css 常用动画效果
文章目录
- css 常用动画效果
- 1.上下运动动画
- 2.宽度变化动画
1.上下运动动画
<div class="box">
<div class="item"></div>
</div>
- 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.宽度变化动画
div {
width: 50px;
height: 20px;
background-color: #ccc;
transition: width 1s; /* 宽度变化效果，过渡时间为1秒 */
}
div:hover {
width: 200px; /* 鼠标悬停时的宽度 */
}