CSS Butterflies

some little animated butterflies with CSS & Javascript (webkit only at the moment). I think I will improve it eventually so the movement of the butterflies is a little more genuine.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS Butterflies</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background: #111;
}

@keyframes flutter-left {
  0%   { transform: rotate3d(0, 1, 0, 20deg); }
  50% { transform: rotate3d(0, 1, 0, 70deg); }
  100% { transform: rotate3d(0, 1, 0, 20deg); }
}

@keyframes flutter-right {
  0%   { transform: rotate3d(0, 1, 0, -20deg); }
  50% { transform: rotate3d(0, 1, 0, -70deg); }
  100% { transform: rotate3d(0, 1, 0, -20deg); }
}

.butterfly {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0; bottom: 0; left: 0;    right: 0;
	transform-style: preserve-3d;
  transform: rotate3d(1, 0.5, 0, 110deg);
}

.left-wing, .right-wing {
  width: 24px;
  height: 42px;
  position: absolute;
  top: 10px;  
}

.left-wing {
  left: 10px;
  top: 10px;
  transform-origin: 24px 50%;
  transform: rotate3d(0, 1, 0, 20deg);
  animation: flutter-left 0.3s infinite;
}

.right-wing {
  left: 34px;
  transform: rotate3d(0, 1, 0, -20deg);
  transform-origin: 0px 50%;
  animation: flutter-right 0.3s infinite;
}

.left-wing .top {
  right: 0;
}

.top, .bottom {
  background: pink;
  opacity: 0.7;
  position: absolute;
}

.top {
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

.bottom {
  top: 18px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background: #111;
}

@keyframes flutter-left {
  0%   { transform: rotate3d(0, 1, 0, 20deg); }
  50% { transform: rotate3d(0, 1, 0, 70deg); }
  100% { transform: rotate3d(0, 1, 0, 20deg); }
}

@keyframes flutter-right {
  0%   { transform: rotate3d(0, 1, 0, -20deg); }
  50% { transform: rotate3d(0, 1, 0, -70deg); }
  100% { transform: rotate3d(0, 1, 0, -20deg); }
}

.butterfly {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0; bottom: 0; left: 0;    right: 0;
	transform-style: preserve-3d;
  transform: rotate3d(1, 0.5, 0, 110deg);
}

.left-wing, .right-wing {
  width: 24px;
  height: 42px;
  position: absolute;
  top: 10px;  
}

.left-wing {
  left: 10px;
  top: 10px;
  transform-origin: 24px 50%;
  transform: rotate3d(0, 1, 0, 20deg);
  animation: flutter-left 0.3s infinite;
}

.right-wing {
  left: 34px;
  transform: rotate3d(0, 1, 0, -20deg);
  transform-origin: 0px 50%;
  animation: flutter-right 0.3s infinite;
}

.left-wing .top {
  right: 0;
}

.top, .bottom {
  background: pink;
  opacity: 0.7;
  position: absolute;
}

.top {
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

.bottom {
  top: 18px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
/* Downloaded from https://www.codeseek.co/ */
var butterflies = [];
setTimeout(function() {
  for (var i=0; i<20; i++) {
    var b = new Butterfly();
    b.init();
    butterflies.push(b);
  };
  
  animate();
}, 500);

function Butterfly() {
  var _this = this;
  
  _this.init = function() {
    _this.x = Math.floor(Math.random()*window.innerWidth);
    _this.y = Math.floor(Math.random()*window.innerHeight);;
    _this.directionX = true;
    _this.directionY = true;

   _this.domElement = document.createElement('div');
   _this.domElement.className = 'butterfly';
   _this.domElement.innerHTML = '<div class="left-wing"><div class="top"></div><div class="bottom"></div></div><div class="right-wing"><div class="top"></div><div class="bottom"></div></div>';
    document.getElementsByTagName('body')[0].appendChild(_this.domElement);
  
  }

  _this.moveButterfly = function() {
    _this.domElement.style.webkitTransform = 'translate3D('+_this.x+'px, '+_this.y+'px, 0px) rotate3d(1, 0.5, 0, 110deg)';
    var randomnumberX=Math.floor(Math.random()*11);
    var randomnumberY=Math.floor(Math.random()*11);
    if(randomnumberX > 8) {
      _this.directionX = _this.directionX*-1;
    }
  
    if(randomnumberY > 8) {
      _this.directionY = _this.directionY*-1;
    }
  
    if(_this.directionX == true) {
      _this.x = _this.x+1;
    } else {
      _this.x = _this.x-1;
    }
  
    if(_this.directionY == true) {
      _this.y = _this.y+1;
    } else {
      _this.y = _this.y-1;
    }
  
  }
  
  return _this;
}

function animate() {
  for(var i=0, l=butterflies.length; i<l; i++) {
    butterflies[i].moveButterfly();
  }
  webkitRequestAnimationFrame(animate);
}

This awesome code ( CSS Butterflies ) is write by Rachel Smith, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Rachel Smith