css+svg实现帆船在海上航行效果代码-html代码-BFW代码库

css+svg实现帆船在海上航行效果代码

代码语言：html

代码描述：css+svg实现帆船在海上航行效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *,
        ::before,
        ::after {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        
        html {
          font-size: 10px;
        }
        
        body {
          height: 100vh;
          width: 100vw;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #303030;
          overflow: hidden;
        }
        
        .container {
          height: 400px;
          width: 400px;
          /* border: 1px solid red; */
          display: flex;
          justify-content: center;
          align-items: flex-end;
          position: relative;
        }
        
        .boat {
          height: 5em;
          width: 20em;
          background-color: #a36a38;
          /* clip-path: polygon(0% 0%, 100% 0%, 90% 70%, 80% 100%, 20% 70%, 10% 10%); */
          border-radius: 0 0 100% 100%;
          position: relative;
          bottom: 20px;
        }
        
        .boat::before {
          content: "";
          height: 1.5rem;
          width: 13rem;
          background-color: red;
          position: absolute;
          top: -1.5rem;
          left: 50%;
          transform: translate(-50%);
        }
        
        .boat::after {
          content: "";
          height: 1.5rem;
          width: 100%;
          border: 2px solid;
          border-color: black transparent black transparent;
          position: absolute;
          top: 1.3rem;
          /* left: 50%;
                    transform: translate(-50%); */
        }
        
        .wing-1 {
          height: 13rem;
          width: 7rem;
          background-color: #fff;
          position: absolute;
          top: -13.5rem;
          left: 3rem;
          clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
        }
        
        .wing-2 {
          height: 9rem;
          width: 7rem;
          backgroun.........完整代码请登录后点击上方下载按钮下载查看