WikongGuan

关注

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

WikongGuan

关注

阅读 43

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富贵 45 0 0

Brose

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

Brose 88 0 0

爱动漫建模

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

爱动漫建模 67 0 0

彩虹_bd07

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

彩虹_bd07 110 0 0

兮城

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

兮城 72 0 0

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

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

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

早安地球

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

早安地球 121 0 0

自由情感小屋

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

自由情感小屋 79 0 0

飞进科技

#yyds干货盘点#nodejs实现jwt

飞进科技 54 0 0

愚鱼看书说故事

#yyds干货盘点#CSS实现超出内容省略号显示

愚鱼看书说故事 132 0 0

精彩评论(0)

0 0 举报