Javascript Code: Make your website romantic butterfly

By using special styles, you can make the appearance of your website more beautiful and unique. In the following code, a red butterfly rotates around the webpage and makes the website more beautiful. You can change the color of the butterfly to suit the other contents.

<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<style>
:root {
    --random-x: 100px;
    --random-y: 200px;
}

.canvas {
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto;
}

.butterfly-body {
    width: 4px;
    height: 25px;
    border-radius: 10px;
    background-color: black;
}

.butterfly-body:before {
    position: absolute;
    top: -5px;
    left: -1px;
    width: 1px;
    height: 6px;
    background-color: black;
    transform: rotate(-25deg);
    content: "";
}

.butterfly-body:after {
    position: absolute;
    top: -5px;
    left: 4px;
    width: 1px;
    height: 6px;
    background-color: black;
    transform: rotate(25deg);
    content: "";
}

.butterfly {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(var(--random-x), var(--random-y));
    transition: transform 2s linear;
}

.butterfly-wing-1 {
    transform: rotateY(60deg);
    animation: Wing1 0.5s infinite;
}

.butterfly-wing-1:before {
    position: absolute;
    top: -9px;
    left: 5px;
    display: block;
    width: 30px;
    height: 20px;
    transform: rotateX(0deg);
    border-radius: 20px 5px;
    background-color: red;
    content: "";
}

.butterfly-wing-1:after {
    position: absolute;
    top: 13px;
    left: 5px;
    display: block;
    width: 30px;
    height: 20px;
    transform: rotateX(-170deg);
    border-radius: 20px 5px;
    background-color: red;
    content: "";
}

.butterfly-wing-2 {
    position: relative;
    top: -1px;
    transform: rotate(180deg) rotateY(60deg);
    animation: Wing2 0.5s infinite;
}

.butterfly-wing-2:before {
    position: absolute;
    top: -9px;
    left: 5px;
    display: block;
    width: 30px;
    height: 20px;
    transform: rotateX(0deg);
    border-radius: 20px 5px;
    background-color: red;
    content: "";
}

.butterfly-wing-2:after {
    position: absolute;
    top: 13px;
    left: 5px;
    display: block;
    width: 30px;
    height: 20px;
    transform: rotateX(-170deg);
    border-radius: 20px 5px;
    background-color: red;
    content: "";
}

@keyframes Wing1 {
0% {
    transform: rotateY(60deg);
}

50% {
    transform: rotateY(0deg);
}

100% {
    transform: rotateY(60deg);
}
}

@keyframes Wing2 {
0% {
    transform: rotate(180deg) rotateY(60deg);
}

50% {
    transform: rotate(180deg) rotateY(0deg);
}

100% {
    transform: rotate(180deg) rotateY(60deg);
}
}

@keyframes Body {
0% {
    transform: translate(58, 198);
}

20% {
    transform: translate(191, 131);
}

40% {
    transform: translate(16, 150);
}

60% {
    transform: translate(128, 168);
}

80% {
    transform: translate(140, 22);
}

100% {
    transform: translate(47, 123);
}
}
</style>
<div class="canvas">
<div class="butterfly">
  <div class="butterfly-wing-1"></div>
  <div class="butterfly-body"></div>
  <div class="butterfly-wing-2"></div>
  </div>
</div>
<script>
var butterfly = document.querySelector('.butterfly');

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

setInterval(function () {
    var numberX = Math.floor(getRandomArbitrary(0, 300));
    var numberY = Math.floor(getRandomArbitrary(0, 400));

    butterfly.style.setProperty('--random-y', numberY + 'px');
    butterfly.style.setProperty('--random-x', numberX + 'px');
}, 3000);
</script>
<a target="_blank" href="https://www.javascriptfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">Javascript Free Code</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Tags: effect, moving, move, browser, explorer

Javascript Best Codes

Javascript Code: Make your website romantic butterfly

Links