效果图
html
<div class="float" style="background: url(./bg.png) no-repeat left bottom;background-size: cover;height: 80%;width: 100%;margin-top: 10%;">
<p style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #fff;width: 100%;text-align: center;">测试漂浮测试漂浮测试漂浮</p>
</div>
css
*{margin: 0;}
.float{
animation: heart 1.3s ease-in-out 0s infinite alternate;
}
@keyframes heart{
from{transform:translate(0,0)}
to{transform:translate(0,15px)}
}
@-webkit-keyframes heart{
from{-webkit-transform:translate(0,0)}
to{-webkit-transform:translate(0,15px)}
}