小兔快跑

最新推荐文章于 2020-07-08 22:05:16 发布

RaylnGuan

最新推荐文章于 2020-07-08 22:05:16 发布

阅读量209

点赞数

分类专栏： Html5&Css3

本文链接：https://blog.csdn.net/rayln/article/details/84505345

版权

Html5&Css3 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
  background:#e2b29f;
  font-size:120%;
  padding:100px;
}

.rabbit {
  width:5em;
  height:3em;
  background:#ffffff;
  border-radius:70% 90% 60% 50%;
  position:relative;
  box-shadow: -0.2em 1em 0 -0.75em #b78e81;
  -webkit-transform: rotate(0deg) translate(-2em,0);
  -webkit-animation: hop 1s infinite linear;
  z-index:1;


}
.rabbit:before {
    content:"";
    position:absolute;
    width:1em;
    height:1em;
    background:white;
    border-radius:100%;
    top:0.5em;
    left:-0.3em;
    box-shadow:
      4em 0.4em 0 -0.35em #3f3334,
      0.5em 1em 0 white,
      4em 1em 0 -0.3em white,
      4em 1em 0 -0.3em white,
      4em 1em 0 -0.4em white;;
    -webkit-animation: kick 1s infinite linear;
}

.rabbit:after {
    content:"";
    position:absolute;
    width:.75em;
    height:2em;
    background:white;
    border-radius:50% 100% 0 0;
    -webkit-transform: rotate(-30deg);
    right:1em;
    top:-1em;
    border-top:1px solid #f7f5f4;
    border-left: 1px solid #f7f5f4;
    box-shadow:-0.5em 0em 0 -0.1em white;
}
.clouds {
  background:white;
  width:2em;
  height:2em;
  border-radius:100% 100% 0 0;
  position:relative;
  top:-5em;
  opacity(0);
  -webkit-transform: translate(0,0);
  -webkit-animation: cloudy 1s infinite linear forwards;
  box-shadow:5em 2em 0 -0.3em white, -2em 2em 0 0 white;



}
.clouds:before,:after {
    content:'';
    position:absolute;
    box-shadow:5em 2em 0 -0.3em white, -2em 2em 0 0 white;
  }
.clouds:before {
    width:1.25em;
    height:1.25em;
    border-radius:100% 100% 0 100%;
    background:white;
    left:-30%;
    bottom:0;
}
.clouds:after {
    width:1.5em;
    height:1.5em;
    border-radius:100% 100% 100% 0;
    background:white;
    right:-30%;
    bottom:0;
  }

@-webkit-keyframes hop {
  20% {
    -webkit-transform: rotate(-10deg) translate(1em,-2em);
    box-shadow: -0.2em 3em 0 -1em #b78e81;
  }
  40% {
    -webkit-transform: rotate(10deg) translate(3em,-4em);
    box-shadow: -0.2em 3.25em 0 -1.1em #b78e81;
  }
  60%,75% {
    -webkit-transform: rotate(0) translate(4em,0);
    box-shadow: -0.2em 1em 0 -0.75em #b78e81;
  }
}


@-webkit-keyframes kick {
  20%,50% {
    box-shadow:
      4em 0.4em 0 -0.35em #3f3334,
      0.5em 1.5em 0 white,
      4em 1.75em 0 -0.3em white,
      4em 1.75em 0 -0.3em white,
      4em 1.9em 0 -0.4em white;
  }
  40% {
    box-shadow:
      4em 0.4em 0 -0.35em #3f3334,
      0.5em 2em 0 white,
      4em 1.75em 0 -0.3em white,
      4.2em 1.75em 0 -0.2em white,
      4.4em 1.9em 0 -0.2em white;
  }
}

@-webkit-keyframes cloudy {
 40% {
    opacity(0.75);
    -webkit-transform: translate(-3em,0);
  }
  55% {
    opacity: 0;
    -webkit-transform: translate(-4em,0);
  }
  90% {
    -webkit-transform: translate(0,0);
  }
}
</style>
</head>
<body>
<div class="rabbit">

</div>
<div class="clouds">

</div>
</body>
</html>

RaylnGuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小兔快跑

[code="html"]Insert title herebody { background:#e2b29f; font-size:120%; padding:100px;}.rabbit { width:5em; height:3em; background:#ffffff; border-radius:70% 90...
复制链接

扫一扫

专栏目录