css鹦鹉

下载代码

html

css

分享到微信朋友圈

html

css

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 145px 2px 6px #00A651,
    -30px 135px 2px 8px #00A651,
    3px 125px 2px 8px #00A651,
    35px 115px 2px 8px #00A651,
    70px 100px 2px 8px #00A651,
    100px 90px 2px 8px #00A651,
    110px 80px 2px 8px #00A651,
    -60px 165px 2px 10px #009453,
    -30px 155px 2px 10px #009453,
    3px 145px 2px 10px #009453,
    35px 135px 2px 10px #009453,
    70px 120px 2px 10px #009453,
    100px 110px 2px 10px #009453,
    120px 100px 2px 10px #009453,
    -62px 180px 2px 10px #008656,
    -30px 175px 2px 10px #008656,
    10px 170px 2px 10px #008656,
    55px 160px 2px 10px #008656,
    90px 145px 2px 10px #008656,
    130px 130px 2px 10px #008656,
    -67px 200px 3px 10px #007959,
    -20px 193px 3px 10px #007959,
    30px 180px 3px 10px #007959,
    80px 170px 3px 10px #007959,
    130px 160px 3px 10px #007959,
    -70px 220px 3px 10px #076B5A,
    -30px 210px 3px 10px #076B5A,
    10px 200px 3px 10px #076B5A,
    60px 190px 3px 10px #076B5A,
    110px 180px 3px 10px #076B5A,
    -70px 235px 5px 10px #225D59,
    -25px 225px 5px 10px #225D59,
    25px 215px 5px 10px #225D59,
    75px 205px 5px 10px #225D59,
    125px 195px 5px 10px #225D59,
    135px 170px 5px 10px #225D59;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg