css实现卡通羊交互动画效果代码-html代码-BFW代码库

css实现卡通羊交互动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现卡通羊交互动画效果代码，鼠标放上去试试。

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

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

<head>
    <meta charset="UTF-8">
<style>
    html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

@keyframes bob {
  0% {
    top: 0;
  }
  50% {
    top: 0.2em;
  }
}
body {
  background: #53bfe0;
  vertical-align: middle;
  text-align: center;
  transform: translate3d(0, 0, 0);
}
body:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.scene {
  display: inline-block;
  vertical-align: middle;
}

.text {
  color: white;
  font-size: 2em;
  font-family: helvetica;
  font-weight: bold;
}

.sheep {
  display: inline-block;
  position: relative;
  font-size: 1em;
}
.sheep * {
  transition: transform 0.3s;
}
.sheep .top {
  position: relative;
  top: 0;
  animation: bob 1s infinite;
}
.sheep:hover .head {
  transform: rotate(0deg);
}
.sheep:hover .head .eye {
  width: 1.25em;
  height: 1.25em;
}
.sheep:hover .head .eye:before {
  right: 30%;
}
.sheep:hover .top {
  animation-play-state: paused;
}
.sheep .head {
  display: inline-block;
  width: 5em;
  height: 5em;
  border-radius: 100%;
  background: #211e21;
  vertical-align: middle;
  position: relative;
  top: 1em;
  transform: rotate(30deg);
}
.sheep .head:before {
  content: '';
  display: inline-block;
  width: 80%;
  height: 50%;
  background: #211e21;
  position: absolute;
  bottom: 0;
  right: -10%;
  border-radius: 50% 40%;
}
.sheep .head:hover .ear.one, .sheep .head:hover .ear.two {
  transform: rotate(0deg);
}
.sheep .head .eye {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 100%;
  background: white;
  position: absolute;
  overflow: hidden;
}
.sheep .head .eye:before {
  content: '';
  display: inline-block;
  background: black;
  width: 50%;
  height: 50%;
  border-radius: 100%;
  position: absolute;
  right: 10%;
  bottom: 10%;
  transition: all 0.3s;
}
.s.........完整代码请登录后点击上方下载按钮下载查看