JavaScript+CSS实现唯美蝴蝶动画

下面我就来详细讲解一下“JavaScript+CSS实现唯美蝴蝶动画”的完整攻略。

1. 准备蝴蝶图片素材

第一步需要准备的就是蝴蝶图片素材。这里我们需要两张素材，一张是蝴蝶展翅的图片，另一张是蝴蝶合拢翅的图片。可以在网络上搜索或者自己拍摄。

2. HTML文件结构

创建一个 HTML 文件，并添加如下结构：

<!DOCTYPE html>
<html>
<head>
    <title>蝴蝶动画</title>
    <meta charset="utf-8">
    <style>
        /* CSS样式代码 */
    </style>
</head>
<body>
    <!-- 用于渲染蝴蝶动画的DOM节点 -->
    <div id="butterfly"></div>
    <script src="./butterfly.js"></script>
</body>
</html>

3. CSS样式代码

添加下面的 CSS 代码：

#butterfly {
  width: 150px;
  height: 150px;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative; 
}

#butterfly:before, #butterfly:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;  
  background-position: 0 0;
}

#butterfly:before {
  transform: translateX(-20px) translateY(-40px) rotate(-30deg);
  animation: leftWing 1s infinite linear;
}

#butterfly:after {
  transform: translateX(70px) translateY(-40px) rotate(30deg);
  animation: rightWing 1s infinite linear;
}

@keyframes leftWing {
  0% { transform: translateX(-20px) translateY(-40px) rotateZ(-30deg); background-image: url(left1.png); }
  50% { background-image: url(left2.png); }
  100% { transform: translateX(-20px) translateY(-40px) rotateZ(30deg); background-image: url(left1.png); }
}

@keyframes rightWing {
  0% { transform: translateX(70px) translateY(-40px) rotateZ(-30deg); background-image: url(right1.png); }
  50% { background-image: url(right2.png); }
  100% { transform: translateX(70px) translateY(-40px) rotateZ(30deg); background-image: url(right1.png); }
}

4. JavaScript代码

最后是 JavaScript 代码，创建一个名为 butterfly.js 的文件，添加以下代码：

var butterfly = document.getElementById('butterfly');
var width = window.innerWidth;
var height = window.innerHeight;

// 监听窗口大小变化
window.addEventListener('resize', function() {
  width = window.innerWidth;
  height = window.innerHeight;
});

// 监听鼠标移动事件
window.addEventListener('mousemove', function(event) {
  var x = event.clientX / width;
  var y = event.clientY / height;
  butterfly.style.transform = 'translate(' + (x * 40 - 20) + 'px, ' + (y * 40 - 20) +'px)';
});

这个文件的作用是控制蝴蝶的动态展示。

示例说明

这里提供两个示例，一个是将蝴蝶动画添加到网页的顶端，一个是将蝴蝶动画添加到一个容器中。

示例一

<!DOCTYPE html>
<html>
<head>
  <title>蝴蝶动画</title>
  <meta charset="utf-8">
  <style>
    #butterfly {
      width: 150px;
      height: 150px;
      background-size: contain;
      background-repeat: no-repeat;
      position: fixed;
      top: 0; 
    }

    #butterfly:before, #butterfly:after {
      content: "";
      position: absolute;
      width: 100px;
      height: 100px;
      background-repeat: no-repeat;  
      background-position: 0 0;
    }

    #butterfly:before {
      transform: translateX(-20px) translateY(-40px) rotate(-30deg);
      animation: leftWing 1s infinite linear;
    }

    #butterfly:after {
      transform: translateX(70px) translateY(-40px) rotate(30deg);
      animation: rightWing 1s infinite linear;
    }

    @keyframes leftWing {
      0% { transform: translateX(-20px) translateY(-40px) rotateZ(-30deg); background-image: url(left1.png); }
      50% { background-image: url(left2.png); }
      100% { transform: translateX(-20px) translateY(-40px) rotateZ(30deg); background-image: url(left1.png); }
    }

    @keyframes rightWing {
      0% { transform: translateX(70px) translateY(-40px) rotateZ(-30deg); background-image: url(right1.png); }
      50% { background-image: url(right2.png); }
      100% { transform: translateX(70px) translateY(-40px) rotateZ(30deg); background-image: url(right1.png); }
    }
  </style>
</head>
<body>
  <!-- 用于渲染蝴蝶动画的DOM节点 -->
  <div id="butterfly"></div>
  <script src="./butterfly.js"></script>
</body>
</html>

此示例中，CSS代码中添加了position: fixed; top: 0; 让蝴蝶动画出现在网页的顶端。

示例二

<!DOCTYPE html>
<html>
<head>
  <title>蝴蝶动画</title>
  <meta charset="utf-8">
  <style>
    #container {
      width: 500px;
      height: 500px;
      overflow: hidden;
      position: relative;
    }

    #butterfly {
      width: 150px;
      height: 150px;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #butterfly:before, #butterfly:after {
      content: "";
      position: absolute;
      width: 100px;
      height: 100px;
      background-repeat: no-repeat;  
      background-position: 0 0;
    }

    #butterfly:before {
      transform: translateX(-20px) translateY(-40px) rotate(-30deg);
      animation: leftWing 1s infinite linear;
    }

    #butterfly:after {
      transform: translateX(70px) translateY(-40px) rotate(30deg);
      animation: rightWing 1s infinite linear;
    }

    @keyframes leftWing {
      0% { transform: translateX(-20px) translateY(-40px) rotateZ(-30deg); background-image: url(left1.png); }
      50% { background-image: url(left2.png); }
      100% { transform: translateX(-20px) translateY(-40px) rotateZ(30deg); background-image: url(left1.png); }
    }

    @keyframes rightWing {
      0% { transform: translateX(70px) translateY(-40px) rotateZ(-30deg); background-image: url(right1.png); }
      50% { background-image: url(right2.png); }
      100% { transform: translateX(70px) translateY(-40px) rotateZ(30deg); background-image: url(right1.png); }
    }
  </style>
</head>
<body>
  <!-- 容器 -->
  <div id="container">
    <!-- 用于渲染蝴蝶动画的DOM节点 -->
    <div id="butterfly"></div>
  </div>
  <script src="./butterfly.js"></script>
</body>
</html>

此示例中，CSS代码中添加了一个包含DIV的容器，并将DIV设置为相对定位，使蝴蝶动画处于该容器内。该容器添加了overflow: hidden，隐藏了蝴蝶动画在容器外部的部分。同时，在容器与蝴蝶DOM节点的CSS样式中，添加了transform: translate(-50%, -50%); 让蝴蝶DOM节点垂直水平居中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript+CSS实现唯美蝴蝶动画 - Python技术站