css实现一直与鼠标交互的鹦鹉头效果代码-html代码-BFW代码库

css实现一直与鼠标交互的鹦鹉头效果代码

代码语言：html

代码描述：css实现一直与鼠标交互的鹦鹉头效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  background-color: #2C5057;
  justify-content: space-around;
  display:flex;
  algin-items:center;
}

.parrot {
  height:230px;
  width:220px;
  margin-top:30px;
  psotion:relative;
  background: #00A651;
  background: linear-gradient(#00C25E, #00A651, #00A651);
  border-radius: 50px 150px 30px 15px;
  box-shadow: inset 0 0 20px #225D59;
  transition: 0.5s;
}

.parrot::after {
  content:'';
  height:170px;
  width:170px;
  position: absolute;
  background: linear-gradient(#FBB040, #FBE642);
  transform: translate(-120px,30px) rotate(-5deg);
  border-radius: 150px 50px 30px 10px;
  box-shadow: inset 5px 2px 20px rgba(60,0,0,.5);
  transition: 0.5s;
  transform-origin: 100% 0%;
}

.parrot:hover {
  transform: rotate(-8deg);
  transform-origin: 110% 100%;
}
.parrot:hover::after{
  transform: translate(-120px,30px) rotate(3deg) scale(1,0.96););
  transform-origin: 110% 0%;
}

.parrot::before {
  content:'';
  height:30px;
  width:30px;
  position: absolute;
  background: #222222;
  transform: translate(70px,50px);
  border-radius: 50%;
  box-shadow: 
    0 0 1px 5px #005500,
    10px 0 1px 14px #eeeeee,
    8px -4px 5px 17px #009453,
    -60px.........完整代码请登录后点击上方下载按钮下载查看