CSS3卡通形象程式碼例項

antzone發表於2018-05-22
CSSS3

分享一段程式碼例項，它利用css3實現了卡通形象效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  background: #3cb464;
}
.container {
  position: absolute;
  width: 800px;
  height: 400px;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.container div, .container span {
  position: absolute;
}
.intem {
  width: 200px;
  height: 200px;
  bottom: 70px;
  left: 50%;
  margin-left: -50px;
  transform-origin: center bottom;
}
.container .wrap {
  width: 100px;
  height: 100px;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  box-shadow: inset 10px -6px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  animation: qiu 0.6s ease-in-out infinite;
}
.intem .wrap .eye {
  background: #fff;
  border-radius: 50%;
  border-top: 2px solid #111;
}
.intem .wrap .eye span {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #232323;
}
.intem .wrap .eye.left {
  top: 30px;
  left: 30px;
  width: 30px;
  height: 29px;
  transform: rotate(-10deg);
}
.intem .wrap .eye.left span {
  top: 12px;
  height: 9px;
  left: 12px;
}
.intem .wrap .eye.right {
  top: 35px;
  right: 20px;
  width: 20px;
  height: 20px;
  transform: rotate(10deg);
}
.container .wrap .eye.right span {
  top: 9px;
  left: 7px;
}
.intem .wrap .mouth {
  width: 16px;
  height: 4px;
  bottom: 20px;
  background: #fff;
  border-radius: 60% 80% 50% 100%;
  left: 50px;
}
.intem .wrap .arm {
  width: 15px;
  height: 16px;
  bottom: 28px;
  border-radius: 7px;
  z-index: -1;
  animation: arm 0.7s ease-in-out infinite;
}
.intem .wrap .arm.left {
  left: -13px;
  transform: rotate(-20deg);
}
.intem .wrap .arm.right {
  right: -13px;
  transform: rotate(20deg);
}
.container .shadow {
  width: 70px;
  height: 10px;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  background: #37a45b;
  box-shadow: 0 0 5px #37a45b;
  animation: shadow 0.7s ease-in-out infinite;
  animation-delay: 0.3s;
}
.intem#pink {
  left: 33%;
  z-index: 30;
}
.intem#pink .wrap {
  background: pink;
}
.intem#pink .mouth {
  left: 43px;
  animation: mounth 0.7s ease-in-out infinite;
}
.intem#pink .arm {
  background: pink;
}
.intem#green {
  left: 58%;
  z-index: 20;
  transform: scale(1.1);
}
.intem#green .wrap {
  background: greenyellow;
  animation-delay: 0.2s;
}
.intem#green .mouth {
  left: 50px;
  height: 15px;
  width: 40px;
  transform: rotate(2deg);
  animation: mounth 0.7s ease-in-out infinite;
}
.intem#green .arm {
  background: greenyellow;
}
.intem#yellow {
  left: 80%;
  z-index: 20;
  transform: scale(0.8);
}
.intem#yellow .wrap {
  background: paleturquoise;
  animation-delay: 0.4s;
}
.intem#yellow .mouth {
  left: 50px;
  width: 20px;
  height: 5px;
  transform: rotate(5deg);
  animation: mounth 0.7s ease-in-out infinite;
}
.intem#yellow .arm {
  background: paleturquoise;
}
@keyframes qiu {
  0% {
    bottom: 0;
  }
  20% {
    bottom: 8px;
  }
  40% {
    bottom: 14px;
  }
  60% {
    bottom: 16px;
  }
  80% {
    bottom: 24px;
  }
  100% {
    bottom: 0;
    border-radius: 49% 47% 42% 40%/60% 60% 40% 40%;
  }
}
@keyframes arm {
  0%,100% {
    bottom: 28px;
  }
  33% {
    bottom: 23px;
  }
  40% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  66% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes shadow {
  0%,100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scaleX(0.8);
    transform: scaleX(0.8);
  }
}
@keyframes mounth {
  0%,100% {
    height: 15px;
    width: 20px;
    border-radius: 50% 66% 50% 50%;
  }
  50% {
    height: 16px;
    bottom: 20px;
    border-radius: 100% 50% 100% 50%;
  }
}
</style>
</head>
<body>
  <div class="container">
    <div class="intem" id="pink">
      <div class="wrap">
        <div class="left eye"><span></span></div>
        <div class="right eye"><span></span></div>
        <div class="mouth"></div>
        <div class="arm left"></div>
        <div class="arm right"></div>
      </div>
      <div class="shadow"></div>
    </div>
    <div class="intem" id="green">
      <div class="wrap">
        <div class="left eye"><span></span></div>
        <div class="right eye"><span></span></div>
        <div class="mouth"></div>
        <div class="arm left"></div>
        <div class="arm right"></div>
      </div>
      <div class="shadow"></div>
    </div>
    <div class="intem" id="yellow">
      <div class="wrap">
        <div class="left eye"><span></span></div>
        <div class="right eye"><span></span></div>
        <div class="mouth"></div>
        <div class="arm left"></div>
        <div class="arm right"></div>
      </div>
      <div class="shadow"></div>
    </div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

相關閱讀：

（1）.position屬性參閱css position定位詳解一章節。

（2）.transform: translate()參閱transform: translate()用法介紹一章節。

（3）.transform-origin參閱CSS3 transform-origin一章節。

（4）.box-shadow參閱box-shadow一章節。

（5）.border-radius參閱CSS3 border-radius一章節。

（6）.animation參閱CSS3 animation一章節。

（7）.transform: rotate()參閱transform: rotate()用法介紹一章節。

（8）.animation-delay參閱CSS3 animation-delay一章節。

（9）.transform: scale()參閱transform: scale()用法介紹一章節。

（10）.@keyframes參閱CSS3 @keyframes一章節。

相關文章