borderデザイン

今回はborderデザインで、スマホスタンプの顔絵文字を再現してみました！

表示確認はこちら！

ソースコード

—-HTML——-
<!--顔-->
<div class="border-test1">
</div>
<!--左目-->
<div class="border-test2">
</div>
<span class="buruburu">
<div class="border-test3">
</div></span>
<!--右目-->
<div class="border-test4">
</div>
<span class="buruburu">
<div class="border-test5">
</div></span>
<div class="border-test6">
</div>
<span class="buruburu2">
<div class="border-test7">
</div></span>

—-css——-
/* 顔 */
.border-test1{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background:#ffdead;
  border: solid 1px #000;
  }
 /* 左目 */
.border-test2{
  width: 30px;
  height: 30px;
  border: solid 1px #000;
  border-radius: 50%;
  background:#fff;
  top:-55px;
  left:8px;
  }
.border-test3{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:#000;
  top:-90px;
  left:18px;
  }
  /* 右目 */
.border-test4{
  width: 30px;
  height: 30px;
  border: solid 1px #000;
  border-radius: 50%;
  background:#fff;
  top:-105px;
  left:42px;
  }
  .border-test5{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:#000;
  top:-140px;
  left:52px;
  }
  /* 口 */
  .border-test6{
  width: 15px;
  height: 5px;
  border-top:solid 1px #000;
  border-left:solid 1px #000;
  border-right:solid 1px #000;
  top:-120px;
  left:33px;
  border-radius: 30%;
  background:#fff;
  }
  .border-test7{
  width: 15px;
  height: 5px;
  border-bottom:solid 1px #000;
  border-left:solid 1px #000;
  border-right:solid 1px #000;
  top:-130px;
  left:33px;
  border-radius: 30%;
  background:red;
  }


  /* 両目 */
.buruburu {
    display: inline-block;
    animation: hurueru .8s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(5px, 5px) rotateZ(0deg)}
    50% {transform: translate(0px, 5px) rotateZ(0deg)}
    75% {transform: translate(5px, 5px) rotateZ(0deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
  /* 口 */
.buruburu2 {
    display: inline-block;
    animation: hurueru .5s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(0px, 4px) rotateZ(0deg)}
    50% {transform: translate(0px, 0px) rotateZ(0deg)}
    75% {transform: translate(0px, 4px) rotateZ(0deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}