CSS Butterflies

In this example below you will see how to do a CSS Butterflies with some HTML / CSS and Javascript

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.

Thumbnail
This awesome code was written by rachsmith, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rachsmith ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/rachsmith/css-butterflies-aAfgr */
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/rachsmith/css-butterflies-aAfgr */
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);
}

Comments