单个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.........完整代码请登录后点击上方下载按钮下载查看