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