海底彩灯世界

在正文的第一句加入“我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”

海底彩灯世界

素材搜集

海底背景图

宇航员垂钓图

鱼群

水母

鲸鱼

实现

• 页面布局

// 依次为背景 宇航员 鱼群 鲸鱼 水母
<div class="floor"></div>
<div class="spaceman"></div>
<div class="fishes"></div>
<div class="fishes1"></div>
<div class="whale"></div>
<div class="jellyfish"></div>

• 背景

.floor{
    width: 100%;
    height: 100%;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a3c35b33396ca80121b994b0cde8.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665454931&t=9fd997a5f2e4d93d6d01ba328276a74f');
    background-size: cover;
    background-position: top center;
    position: relative;
  }

• 宇航员 通过动画的方式 改变translateY的值，来实现上下浮动的效果

 .spaceman{
    width: 225px;
    height: 225px;
    background-image: url('https://pic.qy566.com/snake/6098bcba3479b327d58976f9fc5e0ad4fdbfe18c22bd2-TwjutE_fw658.webp');
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    animation: paoEr linear 3s infinite;
  }
    @keyframes paoEr {
    0%{
      transform: translateY(0);
    }
    50%{
      transform: translateY(50px);
    }
    100%{
      transform: translateY(0);
    }
  }

• 鱼群 一片是从左往右 一片是从右往左，现在以从右往左为例，通过改变定位的right值以及透明度，实现鱼群的游动效果

.fishes{
    width: 658px;
    height: 441px;
    background-image: url('https://pic.qy566.com/snake/edf5a65872bedf0ed484e31960295b3609679834386e6-15ouYk_fw658.webp');
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: 0;
    right: 0;
    animation: lr linear 8s infinite;
  }
  @keyframes lr {
    0%{
      right: 0;
      opacity: 1;
    }
    50%{
      opacity: .6;
    }
    100%{
      right: 100%;
      opacity: 1;
    }
  }

• 鲸鱼 鲸鱼和宇航员类似，只是定位在了右下角，不做赘述
• 水母 水母也是通过动画的方式改变定位值，来实现游动的效果