CodePenとスター・ウォーズネタです。
CSSだけでBB-8を描く方法のテクニックです。

サンプル

ちゃんと動いてるのが可愛い。

See the Pen Pure CSS BB-8 by Emily Goldfein (@emilygoldfein) on CodePen.

HTML

<body>
  <div class="content">
    <div class="background">
      <div class="sky">
        <div id="clouds">
          <div class="cloud x1"></div>
          <div class="cloud x2"></div>
          <div class="cloud x1"></div>
          <div class="cloud x3"></div>
        </div>
      </div>
      <div class="sand">
        <div class="body_shadow"></div>
      </div>
    </div>

    <div class="bb-8">
      <div class="head_container">
        <div class="antenna">
          <div class="antenna_1"></div>
          <div class="antenna_2"></div>
        </div>
          <div class="eye">
        </div>

        <div class="head">
          <div class="stripe"></div>
          <div class="eye_overlap"></div>
          <div class="eye_2">
            <div class="shine_2"></div>
          </div>
          <div class="small_circle"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="wrapper">
        <div class="body">
          <div class="body_container">
            <div class="line_1"></div>
            <div class="line_2"></div>
            <div class="orange-circle" id="leftCircle"></div>
            <div class="orange-circle" id="rightCircle"></div>
            <div class="orange-circle" id="bottomCircle"></div>
          </div>
          <div class="shadow-circle"></div>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

body {
  background-color:#2C2A4A;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  height:400px;
  width:400px;
  border-radius:50%;
  border:5px solid #615F83;
  transform: translate(-50%, -50%);
  display:block;
  overflow:hidden;
  vertical-align:middle;
  line-height:300px;
}

.bb-8 {
  vertical-align: middle;
  text-align:center;
  left:125px;
  position:relative;
  display:inline-block;
  margin: 0 auto;
  transform-origin:50% 50%;
}

.body {
  height:150px;
  width:150px;
  border-radius:50%;
  background-color:white;
  border:3px solid black;
  position:absolute;
  overflow:hidden !important;
  position:fixed;
}

.wrapper {
  overflow:hidden;
}

.body_container {
  height:150px;
  width:150px;
  border-radius:50%;
  background-color:white;
  position:absolute;
  -webkit-animation:spin 1s linear infinite;
  -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
  transform-origin:50% 50%;
  overflow:hidden;
}

@keyframes spin {
  100% {
    transform:rotate(-360deg);
  }
}

.head {
  border:3px solid black;
  background-color:white;
  height:75px;
  width: 110px;
  top:-70px;
  left:20px;
  z-index:10;
  position:absolute;
  -moz-border-radius: 100px 100px 30px 30px;
  border-radius: 100px 100px 30px 30px;
  overflow:hidden;
}

.head_container {
  transform:rotate(5deg);
  position:absolute;
  transform-origin:50% 50%;
  top:0px;
  left:5px;
  z-index:10;
}

.sky {
  height:120px;
  width:400px;
  position:absolute;
  background-color:#87CEFA;
}

.cloud {
  width: 200px; height: 60px;
  background: #fff;
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  position: relative; 
}

.cloud:before, .cloud:after {
  content: '';
  position: absolute; 
  background: #fff;
  width: 100px; height: 80px;
  position: absolute; top: -15px; left: 10px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
}

.cloud:after {
  width: 120px; height: 120px;
  top: -55px; left: auto; right: 15px;
}

.x1 {
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  transform: scale(0.2);
  opacity:0.6;
  -webkit-animation: moveclouds 10s linear infinite;
  -moz-animation: moveclouds 10s linear infinite;
  -o-animation: moveclouds 10s linear infinite;
}

.x2 {
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  opacity:0.7;
  top:-30px;
  -webkit-animation: moveclouds 15s linear infinite;
  -moz-animation: moveclouds 15s linear infinite;
  -o-animation: moveclouds 15s linear infinite;
}

.x3 {
  top:-150px;
  -webkit-transform: scale(0.15);
  -moz-transform: scale(0.15);
  transform: scale(0.15);
  opacity:0.4;
  -webkit-animation: moveclouds 30s linear infinite;
  -moz-animation: moveclouds 30s linear infinite;
  -o-animation: moveclouds 30s linear infinite;
}

.sand {
  background-color:#f6d7b0;
  top:120px;
  height:400px;
  width:400px;
  position:absolute;
}

.sand:before {
 content: '';
  position: absolute; 
  width:400px;
  height:100px;
  top:-10px;
  left:-150px;
  border-radius:50%;
  background-color:#f6d7b0;
  -webkit-animation: movesand 15s linear infinite;
  -moz-animation: movesand 15s linear infinite;
  -o-animation: movesand 15s linear infinite;
}

.sand:after {
  content: '';
  position: absolute; 
  width:400px;
  height:100px;
  top:-10px;
  left:150px;
  border-radius:50%;
  background-color:#f6d7b0;
  -webkit-animation: movesand 15s linear infinite;
  -moz-animation: movesand 15s linear infinite;
  -o-animation: movesand 15s linear infinite;
}

.body_shadow {
  background-color:gray;
  width:190px;
  height:25px;
  border-radius:50%;
  position:absolute;
  top:164px;
  transform:rotate(-3deg);
  left:180px;
  opacity:0.5;
}

.antenna_1 {
  height:40px;
  width:2px;
  background-color:black;
  position:absolute;
  top:-100px;
  left:90px; 
}

.line_1 {
  width:500px; height:100px;  
  border:solid 2px gray;
  border-color:gray transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  position:absolute;
  top:30px;
  left:-100px;
  transform:rotate(-35deg);
  opacity:0.5;
}


.line_2 {
  width:500px; height:100px;  
  border:solid 2px gray;
  border-color:gray transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  position:absolute;
  top:80px;
  left:-200px;
  transform:rotate(55deg);
  opacity:0.5;
}

.antenna_2 {
  height:20px;
  width:2px;
  background-color:black;
  position:absolute;
  top:-90px;
  left:75px; 
}

.eye {
  background-color:black;
  height:35px;
  width:35px;
  border-radius:50%;
  left:17px;
  top:-40px;
  position:absolute;
  overlap:hidden;
  border:1px solid white;
  border-style:inset;
}

.eye_overlap {
  z-index:11;
  background-color:black;
  border:2px solid gray;
  height:30px;
  width:35px;
  border-radius:50%;
  left:-27px;
  top:24px;
  position:absolute;
}

.small_circle {
  position:absolute;
  height:5px;
  width:5px;
  border:2px solid black;
  top:59px;
  left:-10px;
  border-radius:50%;
}

.shine {
  position:absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  background-color:white;
  opacity:0.7;
  left:-45px;
  top:-15px;
}

.eye_2 {
  background-color:black;
  height:11px;
  width:12px;
  border-radius:50%;
  left:15px;
  top:50px;
  position:absolute;
  overflow:hidden;
  border:1px solid gray;
}

.shine_2 {
  position:absolute;
  height:3px;
  width:3px;
  border-radius:50%;
  background-color:white;
  opacity:0.3;
  left:2px;
  top:1px;
}

.orange-circle {
  border:8px #f29d37 solid;
  width:60px;
  height:60px;
  border-radius:50%;
  left:-20px;
  position:absolute; 
}

#leftCircle {
}

#rightCircle {
  left:110px;
}

#bottomCircle {
  top:100px;
  left:50px;
}

.innerCircle {
  position:relative;
  height:55px;
  width:55px;
  left:10px;
  top:10px;
  background-color:white;
  border-radius:50%;
}

.shadow {
  width: 200px;
  height:100px;
  top:-30px;
  left:-40px;
  position:absolute;
  border-radius: 50%;
  transform:rotate(-5deg);
  box-shadow:10px 30px 0px 0px gray;
  opacity:0.2;
}

.stripe {
  opacity:0.6;
  border:7px solid gray;
  border-radius:50%;
  height:50px;
  width:150px;
  left:-25px;
  top:-50px;
  position:absolute;
}

.shadow-circle {
  opacity:0.3;
  height:100px;
  width:140px;
  position:absolute;
  background-color:gray;
  left:5px;
  border-radius:50%;
  top:-65px;
 transform:none;
}

@-webkit-keyframes moveclouds {
    0% {margin-left: 300px;}
    100% {margin-left: -100px;}
}
@-moz-keyframes moveclouds {
    0% {margin-left: 300px;}
    100% {margin-left: -100px;}
}
@-o-keyframes moveclouds {
    0% {margin-left: 300px;}
    100% {margin-left: -100px;}
}

@-webkit-keyframes movesand {
    0% {margin-left: -500px;}
    100% {margin-left: 500px;}
}
@-moz-keyframes movesand {
    0% {margin-left: -500px;}
    100% {margin-left: 500px;}
}
@-o-keyframes movesand {
    0% {margin-left: -500px;}
    100% {margin-left: 500px;}
}

一言

スター・ウォーズのファンサイトに最適。


コメントを投稿する

* が付いている項目は必須です。