WikongGuan

关注

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

WikongGuan

关注

阅读 42

2022-02-27

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

相关推荐

Alex富贵

#yyds干货盘点#CSS导航条动画效果

Alex富贵 43 0 0

Brose

#yyds干货盘点#——css模拟图片透明背景效果

Brose 86 0 0

爱动漫建模

#yyds干货盘点# viewer.js实现预览效果

爱动漫建模 65 0 0

彩虹_bd07

#yyds干货盘点# 用CSS设置颜色、背景和图像效果

彩虹_bd07 107 0 0

兮城

#yyds干货盘点# CSS盒子模型

兮城 70 0 0

自由情感小屋

#yyds干货盘点# CSS布局常用属性

自由情感小屋 78 0 0

早安地球

#yyds干货盘点#原子 CSS 的制作

早安地球 116 0 0

把平平凡凡的生活过成诗与远方

#yyds干货盘点#css开发技巧总结

把平平凡凡的生活过成诗与远方 177 0 0

飞进科技

#yyds干货盘点#nodejs实现jwt

飞进科技 54 0 0

boomwu

#yyds干货盘点#VueRouter模拟实现

boomwu 37 0 0

精彩评论(0)

0 0 举报