css3 漂浮效果（科幻）

效果图

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)}
        }