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