单个div+css布局实现木船和桨效果代码-html代码-BFW代码库

单个div+css布局实现木船和桨效果代码

代码语言：html

代码描述：仅仅使用一个div结合css代码布局实现了一个飘在水面的木船和长短不一的桨效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html, body {
          --wood: #e89848;
          --wood-light: #ea5;
          --wood-dark: #d84;
          --wood-darker: #d07733;
          --water: skyblue;
          background: var(--water);
          overflow: hidden;
        }
        
        @keyframes moveboat {
          0% { transform: translate(-50%, -50%) rotate(0deg); }
          100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        div {
          animation: moveboat 160s linear infinite;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotate(0deg);
          width: 60vmin;
          height: 60vmin;
          background:
            /* handles */
            radial-gradient(160% 80%, #999, #666 60%, transparent 0) 23.5% 54% / 2vmin 7vmin,
            /* frame */
            linear-gradient(transparent, #3212 30%, var(--wood-dark) 0, var(--wood)) 50% 100% / 32% 4vmin,
            radial-gradient(150% 120% at 120% 60%, transparent calc(50% - 3vmin), #3212 calc(50% - 2vmin), var(--wood-dark) 0, var(--wood) 50%, var(--water) 0) 0 0 / 50% 100%,
            radial-gradient(150% 120% at -20% 60%, transparent calc(50% - 3vmin), #3212 calc(50% - 2vmin), var(--wood-dark) 0, var(--wood) 50%, var(--water) 0) 100% 0 / 50% 100%,
            /* seating */
            linear-gradient(var(--wood-darker), var(--wood-dark) 20%, #3215 0, #3213 22% 40%, #3215 42%, var(--wood-darker) 0, var(--wood-dark) 52%, var(--wood) 0, var(--wood-darker) 52.5%, var(--wood-dark) 62.5%, #3215 0, #3213 65% 80%, #3215 82%, var(--wood-darker) 0, var(--wood-dark)) 50% 50% / 98% 98%,
            /* floor */
            repeating-linear-gradient(to left, var(--wood-dark) 0 10%, var(--wood-darker) 20%) 50% 50% / 48% 98%
            ;
          background-repeat: no-repeat;
        }
        
        div::before {
          content: "";
          display: block;
          position: absolute;
          width: 200%;
          height: 200%;
          top: -50%;
          left: -50%;
          background:
            /* hadle */
            radial-gradient(160% 80%, #999, #666 60%, transparent 0) 63% 52% / 2vmin 7vmin,
            /* row */
            linear-gradient(10deg, #0000 35%, #3212 40%, var(--wood-darker) 0, var(--wood-dark), var(--wood-darker) 50%, #3212 0, #0000 55%) 75% 52% / 25% 10%,
            radial-gradient(100% 27% at 100% 51%, transparent 56%, var(--water) 0) 83% 56% / 7% 20%,
            linear-gradient(to right, #87CEEB00 30%, var(--water) 90%) 86.5% 54.5% / 7% 20%,
            linear-gradient(10deg, #f000 30%, var(--wood-d.........完整代码请登录后点击上方下载按钮下载查看