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.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<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'>JavaScript Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Tags:

effect moving move browser explorer

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300