CSS3 一把剑 Sword

sword from http://codepen.io/dremp/pen/itdfB

sword

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1785
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background: #222; }

.jyRel {
  position: relative;
  height: 32em;
  width: 19em;
  margin: 7em auto; }

.jyHead {
  left: 7em;
  top: 1.9em;
  margin: 0 auto;
  position: absolute;
  z-index: 1;
  animation: tilthead 5s ease alternate infinite; }

@keyframes tilthead {
  0% {
    transform: rotate(0deg); }

10% {
    transform: rotate(20deg); }

20% {
    transform: rotate(0deg); }

100% {
    transform: rotate(0deg); } }

.jyNeckWrap {
  position: absolute;
  margin: 0 auto;
  width: 100em;
  height: 260em;
  overflow: hidden;
  top: 115em;
  z-index: 2;
  left: 18em;
  font-size: 5%; }

.jyNeck {
  background: #f2d9a6;
  width: 25em;
  position: absolute;
  left: 31em;
  height: 31em; }

.jyNeck:after {
  content: '';
  position: absolute;
  top: 29em;
  left: -6em;
  z-index: 1;
  width: 37em;
  height: 15em;
  background: #f2d9a6;
  border-radius: 50%; }

.jyDress {
  position: absolute;
  width: 300em;
  vertical-align: middle;
  margin: 0em;
  font-size: 5%;
  margin: 0 auto;
  z-index: 7;
  left: 0em;
  top: 161em; }

.jyStrap {
  width: 5em;
  height: 40em;
  background: #0a0a0a;
  position: absolute;
  top: 14em;
  left: 230em;
  z-index: 45; }

.jyStrap:first-child {
  left: 153em;
  height: 38em;
  top: 15em; }

.jyLace {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 350em;
  list-style: none; }

.jyLace li {
  list-style: none;
  height: 6em;
  width: 10em;
  border-radius: 10em 10em 0 0;
  background: #0a0a0a;
  float: left;
  display: block;
  margin: 0; }

.jyLace {
  width: 130em;
  position: absolute;
  left: 130em;
  top: 52em; }

.jyTop {
  background: #2e3338;
  width: 150em;
  height: 150em;
  margin: 0 auto;
  position: absolute;
  top: -10em;
  left: 120em;
  z-index: 10; }

.jyTop.jyClipPath {
  -webkit-clip-path: polygon(93% 45%, 81% 100%, 19% 100%, 7% 45%);
  -moz-clip-path: polygon(93% 45%, 81% 100%, 19% 100%, 7% 45%);
  -ms-clip-path: polygon(93% 45%, 81% 100%, 19% 100%, 7% 45%);
  clip-path: polygon(93% 45%, 81% 100%, 19% 100%, 7% 45%); }

.jyButton {
  position: absolute;
  z-index: 10;
  background: rgba(209, 230, 250, .8);
  display: block;
  width: 10em;
  height: 10em;
  border-radius: 5em;
  left: 70em;
  top: 80em; }

.jyButton:nth-child(2) {
  top: 100em; }

.jyButton:nth-child(3) {
  top: 120em; }

.jyBelt {
  width: 92em;
  height: 20em;
  background: #0a0a0a;
  margin: 0 auto;
  position: absolute;
  top: 140em;
  left: 146em; }

.jyBelt:after {
  content: "";
  position: absolute;
  border-width: 8em 10em;
  border-style: solid;
  border-color: rgba(26, 128, 230, .8);
  display: block;
  width: 16em;
  height: 10em;
  background: #0a0a0a;
  left: 50em; }

.jyDress .jyBottom {
  background: #2e3338;
  width: 300em;
  height: 200em;
  margin: 0 auto;
  position: absolute;
  top: 155em;
  left: 42em; }

.jyBottom.jyClipPath {
  -webkit-clip-path: polygon(65.5% 0%, 100% 100%, 0% 100%, 34.5% 0%);
  -moz-clip-path: polygon(65.5% 0%, 100% 100%, 0% 100%, 34.5% 0%);
  -ms-clip-path: polygon(65.5% 0%, 100% 100%, 0% 100%, 34.5% 0%);
  clip-path: polygon(65.5% 0%, 100% 100%, 0% 100%, 34.5% 0%); }

.jyArms {
  position: absolute;
  top: 150em;
  left: 99em;
  height: 55em;
  z-index: 12;
  font-size: 6%; }

.jyArm1 {
  z-index: 2;
  position: absolute;
  top: 77em;
  left: -7em;
  width: 94em;
  height: 23em;
  background: #f2d9a6;
  border-radius: 10em 4em 2em 65%;
  border: 1em solid rgba(55, 55, 55, 0.4);
  box-shadow: 1em 3em 3em rgba(55, 55, 55, 0.3);
  transform: rotate(15deg);
  animation: leftswordarm 5s ease infinite alternate; }

@keyframes leftswordarm {
  /*left arm sholder*/
  0% {
    transform: rotate(15deg);
    top: 77em;
    left: -7em; }

10% {
    transform: rotate(20deg);
    top: 72em;
    left: -12em; }

20% {
    transform: rotate(15deg);
    top: 77em;
    left: -7em; }

100% {
    transform: rotate(15deg);
    top: 77em;
    left: -7em; } }

.jyArm1:after {
  z-index: 2;
  position: absolute;
  top: -62em;
  left: -5em;
  content: '';
  width: 25em;
  height: 77em;
  background: #f2d9a6;
  border-radius: 50%; }

.jyHandL {
  z-index: 5;
  position: absolute;
  top: 90em;
  left: 70em;
  width: 30em;
  height: 20em;
  background: #f5e2bc;
  border-radius: 50%;
  border: 1em solid rgba(55, 55, 55, 0.4);
  transform: rotate(-5deg);
  /* right forearm*/ }

.jyArm2 {
  z-index: 4;
  position: absolute;
  top: 52em;
  left: 80em;
  width: 94em;
  height: 25em;
  background: #f2d9a6;
  border-radius: 68% 0 0 15em;
  border: 1em solid rgba(55, 55, 55, 0.4);
  border-bottom: none;
  transform: rotate(150deg);
  box-shadow: 0em -3em 3em rgba(55, 55, 55, 0.3);
  animation: swordarm 5s ease infinite alternate; }

@keyframes swordarm {
  /*right bisep trisep, top arm*/
  0% {
    transform: rotate(150deg);
    top: 52em; }

10% {
    transform: rotate(140deg);
    top: 46em; }

20% {
    transform: rotate(150deg);
    top: 52em; }

100% {
    transform: rotate(150deg);
    top: 52em; } }

.jyArm2:before {
  z-index: -1;
  position: absolute;
  top: 25em;
  left: -10em;
  content: '';
  background: #f2d9a6;
  height: 25em;
  width: 65em;
  border-radius: 20% 50% 0% 20%;
  transform: rotate(60deg); }

.jyHandR {
  z-index: 4;
  position: absolute;
  top: 80em;
  left: 70em;
  width: 30em;
  height: 20em;
  background: #f5e2bc;
  border-radius: 50%;
  border: 1em solid rgba(55, 55, 55, 0.4);
  transform: rotate(-25deg); }

.jyBody {
  position: absolute;
  top: 144em;
  left: 109em;
  width: 105em;
  height: 45em;
  background: #f2d9a6;
  border-radius: 40% 30% 0 0;
  border: 1em solid rgba(55, 55, 55, 0.4);
  border-bottom: none;
  z-index: 2;
  font-size: 6%; }

.jyLeg {
  position: absolute;
  width: 0.75em;
  height: 4em;
  background: #f2d9a6;
  z-index: 2; }

.jyLeg:before {
  content: "";
  position: absolute;
  width: 1.5em;
  height: 4em;
  border-radius: 30% 30% 50% 50%;
  background: #f2d9a6;
  left: -0.375em; }

.jyLegL {
  top: 25em;
  left: 8em; }

.jyLegR {
  top: 24em;
  left: 11em; }

.jyShoe {
  background: #f2d9a6;
  width: 4em;
  height: 10em;
  border-radius: 45%;
  position: absolute;
  border: 0.4em solid #0a0a0a;
  border-bottom-width: 0.8em;
  box-shadow: inset 0px -1em 0 0px #fff, inset 0px -1.4em 0 0px #27a, inset 0 -1.8em 0 0 #fff, inset 0px -2.4em 0 0px #0a0a0a;
  z-index: 1;
  font-size: 45%; }

.jyShoeRight {
  top: 60em;
  transform: rotate(0deg);
  left: 23.3em; }

.jyShoeLeft {
  top: 60em;
  left: 16.5em;
  animation: stepforward 5s ease infinite alternate;
  transform: rotate(0deg); }

@keyframes stepforward {
  0% {
    transform: rotate(0deg);
    top: 60em;
    left: 16.5em; }

10% {
    top: 61.5em;
    transform: rotate(15deg);
    left: 15.65em; }

20% {
    transform: rotate(0deg);
    top: 60em;
    left: 16.5em; }

100% {
    transform: rotate(0deg);
    top: 60em;
    left: 16.5em; } }

.jyBack {
  font-size: 4.5%;
  width: 140em;
  height: 260em;
  position: relative;
  margin: 20em auto; }

.jyFace {
  width: 100em;
  height: 70em;
  border-radius: 0 0 50% 50%;
  background: #f5e2bc;
  position: absolute;
  top: 50em;
  left: 10em;
  z-index: 5;
  /*forehead bang part*/ }

.jyFace:before, .jyFace:after {
  content: "";
  display: block;
  width: 55em;
  height: 55em;
  border-radius: 50% / 25%;
  background: #f5e2bc;
  position: absolute;
  top: -20em; }

.jyFace:before {
  left: 0; }

.jyFace:after {
  right: 0; }

.jyEyeWrap {
  position: Absolute;
  font-size: 200%;
  width: 100%;
  z-index: 100;
  left: 7em;
  top: -4em; }

.jyEye {
  width: 10em;
  height: 10em;
  background: #ecf0f1;
  position: relative;
  border-radius: 1em 8em;
  transform: rotate(-45deg);
  float: left;
  margin: 5em;
  border: 1px solid #f2d9a6; }

.jyPupil {
  display: block;
  position: absolute;
  border: 2em solid #444;
  border-radius: 50%;
  width: 100em;
  height: 100em;
  background-color: #141414;
  box-shadow: inset 0em -2em 0em 20em #212121;
  transform: perspective(100em) rotateY(45deg);
  z-index: 1;
  animation: eyeAnim1 4s ease infinite alternate, eyeAnim2 4s ease infinite alternate;
  font-size: 5%; }

.jyPupil.right {
  left: 190em; }

.jyPupil:after {
  content: "";
  position: absolute;
  height: 50em;
  width: 50em;
  left: 24em;
  top: 24em;
  border-radius: 50%;
  background-color: #fff;
  z-index: 3;
  box-shadow: inset 7em -14em 2em 14em #000, 0em 0em 5em 15em #000; }

@keyframes eyeAnim1 {
  0% {
    transform: perspective(100em) rotateY(15deg); }

50% {
    transform: perspective(100em) rotateY(-15deg); }

100% {
    transform: perspective(100em) rotateY(15deg); } }

@keyframes eyeAnim2 {
  0% {
    left: 10em;
    top: 0; }

100% {
    left: 80em;
    top: 60em; } }

.jyMouth {
  z-index: 1;
  position: absolute;
  top: 40em;
  left: 32em;
  width: 45em;
  height: 20em;
  background: #f5e2bc;
  border-radius: 50%; }

.jyMouth:after {
  position: absolute;
  left: 5em;
  content: '';
  width: 35em;
  height: 10em;
  border-radius: 50%;
  border-bottom: #000 2em solid;
  box-shadow: 0em 3em 3em rgba(55, 55, 55, 0.3); }

.jyHair {
  position: Absolute;
  top: -30em;
  left: -30em;
  animation: hairsway 5s ease 2 alternate; }

@keyframes hairsway {
  0% {
    transform: rotate(0deg);
    top: -30em;
    left: -30em; }

10% {
    transform: rotate(40deg);
    top: -70em;
    left: 40em; }

20% {
    transform: rotate(0deg);
    top: -30em;
    left: -30em; }

100% {
    transform: rotate(0deg);
    top: -30em;
    left: -30em; } }

.jyTopHair {
  width: 120em;
  height: 120em;
  background: #0a0a0a;
  border-radius: 50%;
  position: absolute;
  margin-top: 20em;
  margin-left: 30em;
  z-index: 1; }

.jyTopHair::before {
  content: "";
  width: 117em;
  height: 190em;
  background: inherit;
  position: absolute;
  top: 45em;
  left: 2em;
  /*first jyLeftCurl*/ }

.jyLeftCurl::before {
  content: "";
  width: 110em;
  height: 110em;
  position: absolute;
  background: transparent;
  border-radius: 50%;
  top: 0;
  left: -29em;
  box-shadow: inset 46em 20em 0 #0a0a0a; }

.jyLeftCurl {
  width: 110em;
  height: 110em;
  position: absolute;
  border-radius: 50%;
  top: 180em;
  left: 57em;
  box-shadow: inset 50em 20em 0 #0a0a0a;
  clip: rect(50em, 70em, 140em, -26em);
  z-index: 6;
  /*third hair jyLeftCurl*/ }

.jyLeftCurl::after {
  content: "";
  width: 110em;
  height: 120em;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 45em;
  box-shadow: inset 50em 50em 0 #0a0a0a;
  clip: rect(0em, 50em, 120em, 0); }

.jyRightCurl {
  width: 110em;
  height: 110em;
  position: absolute;
  border-radius: 50%;
  top: 175em;
  left: 78em;
  clip: rect(20em, 70em, 140em, -26em);
  z-index: 5;
  transform: rotate(0deg);
  /*first jyLeftCurl*/ }

.jyRightCurl::before {
  content: "";
  width: 110em;
  height: 110em;
  position: absolute;
  background: transparent;
  border-radius: 50%;
  top: 0;
  left: -29em;
  box-shadow: inset 30em 1em 0 #0a0a0a;
  transform: rotate(180deg); }

.jyCoverHair {
  content: "";
  display: block;
  width: 30em;
  height: 115em;
  border-radius: 50% / 25%;
  background: #0a0a0a;
  position: absolute;
  top: 50em;
  left: 36em;
  z-index: 10;
  transform: rotate(6deg); }

.jyEar {
  display: block;
  width: 10em;
  height: 25em;
  border-radius: 50%;
  background: #f2d9a6;
  position: absolute;
  top: 50em;
  left: 105em;
  z-index: 10; }

.eyeBrow {
  width: 20em;
  height: 10em;
  position: absolute;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom: 2em solid #120d03;
  top: 45em;
  left: 35em;
  z-index: 15;
  transform: rotate(180deg); }

.jyBrow {
  width: 20em;
  height: 10em;
  position: absolute;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom: 2em solid #120d03;
  z-index: 15;
  transform: rotate(180deg); }

.jyBrowL {
  top: 45em;
  left: 35em; }

.jyBrowR {
  top: 45em;
  left: 74em; }

.jyNoseOutline {
  width: 12em;
  height: 15em;
  background-color: transparent;
  border-right: 2em solid rgba(18, 13, 3, .9);
  border-bottom: 2em solid rgba(18, 13, 3, .9);
  border-radius: 40%;
  position: absolute;
  left: 60em;
  top: 70em;
  z-index: 24; }

.sword {
  display: inline-block;
  width: 5em;
  position: absolute;
  top: -7.5em;
  left: 5.5em;
  z-index: 11;
  transform: rotate(-18deg);
  animation: swordswing 5s infinite alternate; }

@keyframes swordswing {
  0% {
    transform: rotate(-18deg);
    left: 5.5em;
    top: -7.5em; }

10% {
    transform: rotate(-25deg);
    left: 4.5em;
    top: -7em; }

20% {
    transform: rotate(-18deg);
    left: 5.5em;
    top: -7.5em; }

100% {
    transform: rotate(-18deg);
    left: 5.5em;
    top: -7.5em; } }

.blade {
  background-color: #cfcfcf;
  height: 20em;
  width: 1em;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  box-shadow: -0.5em 0 0 0 rgba(110, 110, 110, .5) inset; }

.knob {
  border-radius: 50%;
  position: relative;
  top: -0.5em;
  height: 1em;
  width: 1em;
  background-color: #ccc; }

.blade, .grip, .knob {
  margin: auto; }

.guard, .grip {
  background-color: #706e61; }

.guard {
  height: 0.45em;
  width: 100%;
  border-radius: 33%; }

.grip {
  height: 4em;
  width: 0.7em;
  border-radius: 150%;
  border-top-right-radius: 0;
  border-top-left-radius: 0; }

HTML

</div>
    
    <div class="jyNeckWrap">
      <div class="jyNeck"></div>
    </div>
    
  </div>
  
  
  <div class="jyBody"> </div>
  
  <div class="jyArms">
    <div class="jyHandL"></div>
    <div class="jyHandR"></div>
    <div class="jyArm1"></div>
    <div class="jyArm2"></div>
  </div>
  <div class="jyDress">
    <div class="jyStrap"></div>
    <div class="jyStrap"></div>
    <ul class="jyLace">
      <li></li ><li></li> <li></li> <li></li> <li></li>
      <li></li ><li></li> <li></li> <li></li> <li></li>
      <li></li ><li></li> <li></li>
    </ul>
    <div class="jyTop jyClipPath">
      <div class="jyButton"></div>
      <div class="jyButton"></div>
      <div class="jyButton"></div>
    </div>
    <div class="jyBelt"></div>
    <div class="jyBottom jyClipPath"></div>
    
  </div>
  
  
  <div class="jyLeg jyLegL"></div>
  <div class="jyLeg jyLegR"></div>
  
           
  <div class='jyShoe jyShoeLeft'></div>
  <div class='jyShoe jyShoeRight'></div>
  
  
  <div class='sword'>
    <div class='blade'></div>
    <div class='guard'></div>
    <div class='grip'></div>
    <div class='knob'></div>
  </div>
  
</main>

sword from http://codepen.io/dremp/pen/itdfB

sword

编辑器支持Emmet

快捷键

sword from http://codepen.io/dremp/pen/itdfB

sword

纯CSS box-shadow实现的像素动画 - 武士篝火和宝剑

一个很棒用纯CSS实现的剑客比武场景

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：