7款趣味性不错的前端特效动画及源码分享（附源码）

鼠标悬停切换表情动画特效

基于CSS的transform属性制作鼠标悬停切换表情动画特效，默认为笑脸表情，鼠标悬停上去切换爱心眼睛色眯眯的表情。

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>鼠标悬停切换表情动画特效</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <h1>鼠标悬停查看演示</h1>
   <div class="head">
      <div class="left-eye">
         <div id="heart-1" class="heart"></div>
      </div>
      <div class="right-eye">
         <div id="heart-2" class="heart"></div>
      </div>
      <div class="mouth"></div>
   </div>
</body>
</html>

3D蜡烛烛光动画特效

基于three.js制作的3D蜡烛烛光动画特效，支持鼠标拖动旋转视角查看多方位特效。

预览获取

在这里插入图片描述
核心代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>3D蜡烛烛光动画特效</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <script type="text/javascript" src="js/three.min.js"></script>
  <script type="text/javascript" src="js/OrbitControls.js"></script>
  <script type="text/javascript">
    function getFlameMaterial(isFrontSide) {
      let side = isFrontSide ? THREE.FrontSide : THREE.BackSide;
      return new THREE.ShaderMaterial({
        uniforms: {
          time: { value: 0 }
        },
        vertexShader: `
        uniform float time;
        varying vec2 vUv;
        varying float hValue;

        // 2D Random
        float random (in vec2 st) {
            return fract(sin(dot(st.xy,
            vec2(12.9898,78.233)))
            * 43758.5453123);
        }
        float noise (in vec2 st) {
            vec2 i = floor(st);
            vec2 f = fract(st);

            // Four corners in 2D of a tile
            float a = random(i);
            float b = random(i + vec2(1.0, 0.0));
            float c = random(i + vec2(0.0, 1.0));
            float d = random(i + vec2(1.0, 1.0));

            // Smooth Interpolation

            // Cubic Hermine Curve.  Same as SmoothStep()
            vec2 u = f*f*(3.0-2.0*f);
            // u = smoothstep(0.,1.,f);

            // Mix 4 coorners percentages
            return mix(a, b, u.x) +
                    (c - a)* u.y * (1.0 - u.x) +
                    (d - b) * u.x * u.y;
        }

        void main() {
          vUv = uv;
          vec3 pos = position;

          pos *= vec3(0.8, 2, 0.725);
          hValue = position.y;
          //float sinT = sin(time * 2.) * 0.5 + 0.5;
          float posXZlen = length(position.xz);

          pos.y *= 1. + (cos((posXZlen + 0.25) * 3.1415926) * 0.25 + noise(vec2(0, time)) * 0.125 + noise(vec2(position.x + time, position.z + time)) * 0.5) * position.y; // flame height

          pos.x += noise(vec2(time * 2., (position.y - time) * 4.0)) * hValue * 0.0312; // flame trembling
          pos.z += noise(vec2((position.y - time) * 4.0, time * 2.)) * hValue * 0.0312; // flame trembling

          gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
        }
      `,
        fragmentShader: `
        varying float hValue;
        varying vec2 vUv;


        vec3 heatmapGradient(float t) {
          return clamp((pow(t, 1.5) * 0.8 + 0.2) * vec3(smoothstep(0.0, 0.35, t) + t * 0.5, smoothstep(0.5, 1.0, t), max(1.0 - t * 1.7, t * 7.0 - 6.0)), 0.0, 1.0);
        }

        void main() {
          float v = abs(smoothstep(0.0, 0.4, hValue) - 1.);
          float alpha = (1. - v) * 0.99; // bottom transparency
          alpha -= 1. - smoothstep(1.0, 0.97, hValue); // tip transparency
          gl_FragColor = vec4(heatmapGradient(smoothstep(0.0, 0.3, hValue)) * vec3(0.95,0.95,0.4), alpha) ;
          gl_FragColor.rgb = mix(vec3(0,0,1), gl_FragColor.rgb, smoothstep(0.0, 0.3, hValue)); // blueish for bottom
          gl_FragColor.rgb += vec3(1, 0.9, 0.5) * (1.25 - vUv.y); // make the midst brighter
          gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.66, 0.32, 0.03), smoothstep(0.95, 1., hValue)); // tip
        }
      `,
        transparent: true,
        side: side
      });
    }
  </script>

  <div id="info"
    style="position: absolute;width:62px; height: 62px; top: 5px; left: 5px; overflow: hidden; margin:0; padding: 0">
    <div id="circle" class="noselect">i</div>
  </div>

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

</body>

</html>

3D海洋粒子波浪动画特效

基于canvas制作的3D海洋粒子波浪特效，波浪粒子无限延伸非常逼真酷炫。

预览获取

在这里插入图片描述
核心代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D海洋粒子波浪动画特效</title>
<style>
canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>
</head>
<body>
<div></div>
<script>
// Init Context
let c = document.createElement('canvas').getContext('2d')
let postctx = document.body.appendChild(document.createElement('canvas')).getContext('2d')
let canvas = c.canvas
let vertices = []

// Effect Properties
let vertexCount = 7000
let vertexSize = 3
let oceanWidth = 204
let oceanHeight = -80
let gridSize = 32;
let waveSize = 16;
let perspective = 100;

// Common variables
let depth = (vertexCount / oceanWidth * gridSize)
let frame = 0
let { sin, cos, tan, PI } = Math

// Generating dots
for (let i = 0; i < vertexCount; i++) {
	let x = i % oceanWidth
  let y = 0
  let z = i / oceanWidth >> 0
	let offset = oceanWidth / 2
	vertices.push([(-offset + x) * gridSize, y * gridSize, z * gridSize])
}

loop()
</script>

</body>
</html>

看见流星先许个愿

基于canvas实现的流星雨星星动画特效，除了有流星的滑落还有一闪一闪的亮星星以及十五的月亮，美轮美奂的。

预览获取

在这里插入图片描述
核心代码

<script>
		var context;
		var arr = new Array();
		var starCount = 800;
		var rains = new Array();
		var rainCount = 20;

		//初始化画布及context
		function init() {
			//获取canvas
			var stars = document.getElementById("stars");
			windowWidth = window.innerWidth; //当前的窗口的高度
			stars.width = windowWidth;
			stars.height = window.innerHeight;
			//获取context
			context = stars.getContext("2d");
		}

		//创建一个星星对象
		var Star = function () {
			this.x = windowWidth * Math.random();//横坐标
			this.y = 5000 * Math.random();//纵坐标
			this.text = ".";//文本
			this.color = "white";//颜色

			//产生随机颜色
			this.getColor = function () {

				var _r = Math.random();

				if (_r < 0.5) {
					this.color = "#333";
				} else {
					this.color = "white";
				}

			}

			//初始化
			this.init = function () {
				this.getColor();
			}
			//绘制
			this.draw = function () {
				context.fillStyle = this.color;
				context.fillText(this.text, this.x, this.y);
			}

		}

		//画月亮
		function drawMoon() {
			var moon = new Image();
			moon.onload = function () {
				context.drawImage(moon, -5, -10);
			}
			moon.src = "images/moon.jpg"
		}



		//页面加载的时候
		window.onload = function () {

			init();
			//画星星
			for (var i = 0; i < starCount; i++) {
				var star = new Star();
				star.init();
				star.draw();
				arr.push(star);
			}

			//画流星
			for (var i = 0; i < rainCount; i++) {
				var rain = new MeteorRain();
				rain.init();
				rain.draw();
				rains.push(rain);
			}

			drawMoon();//绘制月亮
			playStars();//绘制闪动的星星
			playRains();//绘制流星

		}

		//星星闪起来
		function playStars() {
			for (var n = 0; n < starCount; n++) {
				arr[n].getColor();
				arr[n].draw();
			}

			setTimeout("playStars()", 100);
		}

		... 
	</script>

仿苹果手机桌面文件夹特效

仿苹果手机桌面文件夹特效是一款纯CSS绘制的iPhone界面，点击文件夹可浮动展开显示，点击空白处可以收起。效果很流畅，桌面打开文件夹效果一样。

预览获取

在这里插入图片描述
核心代码

 <div class="screen">
    <input type="radio" id="_p0" name="pg" checked="checked">
    <input type="radio" id="_p1" name="pg">
    <div class="status">
      <div class="carrier">No Service</div>
      <div class="clock">12:00 AM</div>
      <div class="battery">
        <div class="battery-meter">
          <div class="battery-meter-inner"></div>
        </div>
      </div>
    </div>
    <div class="pages">
      <div class="page">
        <div class="app">
          <div class="app-icon"></div>
          <div class="app-name">王者荣耀</div>
        </div>
        <div class="app">
          <div class="app-icon"></div>
          <div class="app-name">QQ</div>
        </div>
        <div class="app">
          <div class="app-icon"></div>
          <div class="app-name">微信</div>
        </div>
        <div class="app">
          <div class="app-icon"></div>
          <div class="app-name">网易云</div>
        </div>
        <div class="app">
          <div class="app-icon"></div>
          <div class="app-name">高德</div>
        </div>
        <div class="app">
          <div class="app-icon"></div>
          <div class="app-name">百度</div>
        </div>
        <div class="folder">
          <div class="folder-apps" tabindex="0">
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">支付宝</div>
            </div>
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">中国银行</div>
            </div>
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">招商银行</div>
            </div>
          </div>
          <div class="bg-blur"></div>
          <div class="folder-name">理财</div>
        </div>
        <div class="folder">
          <div class="folder-apps" tabindex="0">
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">语音备忘录</div>
            </div>
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">指南针</div>
            </div>
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">测距仪</div>
            </div>
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">放大镜</div>
            </div>
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">计算器</div>
            </div>
            <div class="app">
              <div class="app-icon"></div>
              <div class="app-name">时钟</div>
            </div>
          </div>
          <div class="bg-blur"></div>
          <div class="folder-name">实用工具</div>
        </div>
    <div class="pagination">
      <label for="_p0"><span></span></label>
      <label for="_p1"><span></span></label>
    </div>
  </div>

纸飞机跟随鼠标飞行动画特效

一款娱乐性很强的canvas纸飞机跟随鼠标飞行动画特效，鼠标指针指向哪边飞机就会朝哪个方向飞去，简直有趣又好玩。

预览获取

在这里插入图片描述

<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>纸飞机跟随鼠标飞行动画特效</title>
	<link rel="stylesheet" type="text/css" href="fly.css">
	<script type="text/javascript" src="js/paper-full.min.js"></script>
</head>

<body>
	<canvas id="triangle-lost-in-space" resize="true"></canvas>
	<script type="text/javascript" src="js/fly.js"></script>
	<style>
		canvas {
			width: 100%;
			height: 100%
		}
	</style>
</body>

</html>

敲击乐器特效

基于HTML5+SVG制作的模拟打击乐器动画特效，点击相应的乐器时会发出相应的乐器音效，非常具有娱乐性。

预览获取

在这里插入图片描述
核心代码

	<!-- Audio -->
			<audio id="can1-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can1.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="can2-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can2.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="can3-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can3.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="bucket1-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket1.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="bucket2-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket2.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="bucket3-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket3.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="pot1-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/pot1.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="pot2-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/pot2.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="cup1-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/cup2.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="cup2-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/cup1.mp3" preload="auto"
					type="audio/mp3" />
			</audio>
			<audio id="lid1-Audio">
				<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/lid1.mp3" preload="auto"
					type="audio/mp3" />
			</audio>