css布局实现气候变化北极熊漂浮动画效果-html代码-BFW代码库

css布局实现气候变化北极熊漂浮动画效果

代码语言：html

所属分类：动画

代码描述：css布局实现气候变化北极熊漂浮动画效果

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body{
  background-color: #c7f1fd;
}
.container{
  top: -250px;
  left: 0%;
  position: absolute;
  animation: float 7s infinite;
}
@keyframes float { 
  0% { left: 50px; }
  50% { left: -100px; } 
  100% { left: 50px; }
}
.water {
  width: 2400px;
  height: 600px;
  background: #8de3fb;
  position: absolute;
  top: 500px;
  left: -50px;
  z-index: -9;
}
.bear {
  position: relative;
}
.head {
  width: 100px;
  height: 90px;
  background: #f8f8f8;
  border-radius: 20px 20px 20px 20px;
  position: relative;
  left: 400px;
  box-shadow: 3px 3px 20px #e8e7e7;
  animation: nod 5s infinite;
}
@keyframes nod { 
  0% { top: 200px; }
  25% { top: 190px; } 
  50% { top: 175px; }
  75% { top: 190px; }
  100% { top: 200px; }
}
.jaw {
  width: 82px;
  height: 82px;
  background: #f8f8f8;
  border-radius: 20px 20px 20px 20px;
  transform: rotate(45deg);
  position: relative;
  left: 9px;
  top: 33px;
  box-shadow: 10px 10px 10px #e8e7e7;
}
.nose {
  width: 25px;
  height: 25px;
  background: #464646;
  border-radius: 8px 8px 8px 8px;
  transform: rotate(45deg);
  position: relative;
  top: 35px;
  left: 35px;
}
.eyes {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #464646;
  position: absolute;
}
.pos1 {
  position: absolute;
  top: 35px;
  left: 5px;
}
.pos2 {
  position: absolute;
  top: 5px;
  left: 35px;
}
.ears {
  width: 30px;
  height: 30px;
  border-radius: 50% 0 0 50%;
  background: #d7d7d7;
  position: relative;
  border: 8px solid #f8f8f8;
  z-index: -1;  
}
.posi1 {
  position: absolute;
  left: -15px;
  bottom: 62px;
  transform: rotate(45deg);  
}
.posi2 {
  position: absolute;
  left: 75px;
  bottom: 62px;
  transform: rotate(135deg);  
}
.bearbody {
  width: 300px;
  height: 180px;
  border-radius: 100px;
  background: #f8f8f8;
  position: relative;
  left: 440px;
  top: 120px;
  z-index: -2;
}
.leg {
  width: 50px;
  height: 150px;
  border-radius: 0 0 20px 0;
  background: #f8f8f8;
}
.leg1 {
  width: 50px;
  height: 150px;
  background: #a4a4a4;
  z-index: -3 !important;
}
.paw1 {
  width: 30px;
  height: 35px;
  border-radius: 25px 0 0 0;
  background: #f8f8f8;
  position: relative;
  top: 115px;
  right: 22px;
}
.paw2 {
  width:.........完整代码请登录后点击上方下载按钮下载查看