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: 30px;
  height: 35px;
  border-radius: 25px 0 0 0;
  background: #a4a4a4;
  position: relative;
  top: 115px;
  right: 22px;
}
.posit1 {
  position: relative;
  left: 40px;
  top: 90px;
}
.posit2 {
  position: relative;
  left: 250px;
  top: -60px;
}
.posit3 {
  position: absolute;
  left: 450px;
  top: 450px;
}
.posit4 {
  position: relative;
  left: 660px;
  top: 450px;
}
.icesheet {
  position: absolute;
  left: 350px;
  top: 558px;
  width: 400px;
  box-sizing: content-box;
  border-width: 50px 50px 0;
  border-style: solid;
  border-color: #eae9e9 transparent;
  transform: rotate(180deg);
  z-index: -3;
}
.icesheet:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -104px;
  left: -52px;
  border-width: 0 252px 55px;
  border-style: solid;
  border-color: transparent transparent #eae9e9;
}
.edge {
  position: absolute;
  border-top: 50px solid #d4d4d4;
	border-left: 10px solid transparent;
	border-right: 20px solid transparent;
	height: 0;
	width: 255px;
  top: -125px;
  right: -77px;
  transform: rotate(12deg);
}
.edge::after {
  content: "";
  display: inline-block;
  position: absolute;
  border-top: 50p.........完整代码请登录后点击上方下载按钮下载查看