css实现小船漂浮在海浪中的动画效果-html代码-BFW代码库

css实现小船漂浮在海浪中的动画效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <meta charset="UTF-8"><title>HTML5</title>
   
    <style>
        .ship-wrap {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            overflow: hidden;
            width: 600px;
            height: 600px;
            background-color: #aae7ff;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        .ship-wrap .wave {
            position: absolute;
            width: 1200px;
            -webkit-transform-origin: center center;
            transform-origin: center center;
        }
        .ship-wrap .wave:before {
            content: "";
            position: absolute;
            left: 0;
            top: -10px;
            right: 0;
            background-repeat: repeat;
            height: 10px;
            background-size: 20px 20px;
            background-image: -webkit-radial-gradient(10px -5px circle, rgba(0, 0, 0, 0) 12px, #91b9ff 12px);
            background-image: radial-gradient(circle at 10px -5px, rgba(0, 0, 0, 0) 12px, #91b9ff 12px);
        }
        .ship-wrap .wa.........完整代码请登录后点击上方下载按钮下载查看