0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点#CSS实现漂浮效果

1.效果展示

#yyds干货盘点#CSS实现漂浮效果_特效

2.代码

.box {
width: 100px;
height: 100px;
background: #fb3;
border-radius: 50%;
animation: heart 1.3s linear infinite alternate;
}

@keyframes heart {
from {
transform: translate(0, 0) /*可以不需要*/
}

to {
transform: translate(0, 6px)
}
}


/*使用margin-top 会卡顿*/
/* @keyframes heart {
from {
margin-top: 0px;
}

to {
margin-top: -6px;
}
} */

3.注意

#yyds干货盘点#CSS实现漂浮效果_css_02

举报

相关推荐

0 条评论