13款趣味性不错(炫酷)的前端动画特效及源码(预览获取)分享（附源码）

最新推荐文章于 2024-06-20 23:28:37 发布

迂幵

最新推荐文章于 2024-06-20 23:28:37 发布

阅读量1.2k

点赞数 9

分类专栏：分享动画前端文章标签：炫酷特效前端源码代码分享源码获取动画特效 canvas特效 svg特效

本文链接：https://blog.csdn.net/qq_50594742/article/details/134835095

版权

分享同时被 3 个专栏收录

85 篇文章 1 订阅

订阅专栏

前端

71 篇文章 3 订阅

订阅专栏

动画

53 篇文章 0 订阅

订阅专栏

文字激光打印特效

基于canvas实现的动画特效，你既可以设置初始的打印文字也可以在下方输入文字可实现激光字体打印，精简易用。

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文字激光打印特效</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="page page-laser-to-text">
    <input id="input" type="text" maxlength="24" placeholder="Hello World!">
    <canvas id="canvas"></canvas>
  </div>
  <script src="./script.js"></script>
</body>
</html>

填色画游戏源码

是基于canvas实现的填色游戏属于开阔性的游戏，通过选中色块，来给模型填充任意颜色。支持多种模型选择填色效果。

预览获取

在这里插入图片描述

核心代码

<div id="boxRender">
		<div id="nowSelectColor">
		</div>
		<div id="colorSelect" class="colorSelect"></div>
	</div>
	<div class="imgShowRow">
		<div onclick="changeDraw(0)" style=" background-image: url(exp/A.png);" class="item">
			<div class="toolBox">汽车</div>
		</div>
		<div onclick="changeDraw(1)" style=" background-image: url(exp/B.png);" class="item">
			<div class="toolBox">蘑菇</div>
		</div>
		<div onclick="changeDraw(2)" style=" background-image: url(exp/C.png);" class="item">
			<div class="toolBox">飞机</div>
		</div>
		<div onclick="changeDraw(3)" style=" background-image: url(exp/D.png);" class="item">
			<div class="toolBox">气球</div>
		</div>
		<div onclick="changeDraw(4)" style=" background-image: url(exp/E.png);" class="item">
			<div class="toolBox">小鸭</div>
		</div>
		<div onclick="changeDraw(5)" style=" background-image: url(exp/F.png);" class="item">
			<div class="toolBox">皮球</div>
		</div>
	</div>

盒子发光特效源码

盒子发光特效源码呈现了卡片式边框发光渐变色的动画效果，鼠标悬停可实现边框全部发光的动效。

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子发光特效源码</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div role="button">
    <span class="glow"></span>
    <div>
      <span>cool</span>Glowing shadows
    </div>
  </div>
  <script src="./script.js"></script>
</body>
</html>

canvas下雪动画特效

canvas下雪动画特效，模拟了下雪路径的的场景动画效果，可用于设置网页背景图。

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas下雪动画特效</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <canvas id="canvas"></canvas>
  <script src="./script.js"></script>
</body>
</html>

24h在线时钟表盘特效

一款时尚的钟表创意特效，在线时钟表盘呈现了24小时时钟走动的动画效果，实时日期时间显示，简单实用，可用于手表表盘、网页插图等。

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>24h在线时钟表盘</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="clock">
    <div id="seconds"></div>
    <div id="minutes"></div>
    <div id="hours"></div>
    <div id="todayDate" class="date"></div>
  </div>
  <script src="./script.js"></script>
</body>
</html>

canvas森林瀑布动画特效

Canvas森林瀑布动画特效是一款基于three.js canvas绘制3D积木模型的森林瀑布流动特效。

预览获取

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas森林瀑布动画特效</title>
    <link rel="stylesheet" href="css/zzsc.css">
</head>

<body>
    <canvas id="canvas"></canvas>
    <script src='js/three.min.js'></script>
    <script src="js/zzsc.js"></script>
</body>
</html>

CSS3 SVG粘性气泡加载动画特效

这是一款基于CSS3 SVG气泡加载动画特效特效带有粘性的个性网页气泡加载效果。

预览获取

在这里插入图片描述

核心代码

	<body>
  <script src="/demos/googlegg.js"></script>
  <div class="blobs">
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
    <div class="blob active"></div>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="17" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
        <feBlend in="SourceGraphic" in2="goo">
      </filter>
    </defs>
  </svg>
</body>

飞机打字小游戏源码

飞机打字小游戏源码是一款canvas文打字游戏，在键盘上输入对应单词字母、可以消灭屏幕上出现的字母,也可以得到相应的分数，这款小游戏既可以当娱乐消遣同时还能提高打字速度。

预览获取

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

<body>
	<h3>输入对应掉下来的字符</h3>
	<div id="ad" style="display: block;"></div>
	<div id="game">
		<canvas style="cursor: auto;" height="640" width="360" id="canvas">
			<div id="nocanvas"> 想玩这款游戏？你需要有个不错的浏览器.</div>
		</canvas>
	</div>
	<script type="text/javascript">window.initGame();</script>
</body>

CSS悬停百叶窗轮播特效

CSS3悬停百叶窗轮播特效是一款CSS制作的3D百叶窗图片轮播牌，卷帘式图片切换特效。

预览获取

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS悬停百叶窗广告牌轮播特效</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  +...97个 cell类
  <div class="scene">
    <div class="sign">
      <div class="shadow"></div>
      <div class="sign_front"></div>
      <div class="sign_topIn"></div>
      <div class="sign_topOut"></div>
      <div class="sign_bottomIn"></div>
      <div class="sign_bottomOut"></div>
      <div class="sign_leftIn"></div>
      <div class="sign_leftOut"></div>
      <div class="sign_rightIn"></div>
      <div class="sign_rightOut"></div>

      <div class="sign_segments">
        <div class="sign_segment">
          <div></div>
          <div></div>
          <div></div>
        </div>
    	+... 23个sign_segment类
      </div>
    </div>
  </div>
</body>
</html>

鼠标点击放大镜特效

鼠标点击放大镜特效可以通过点击鼠标来放大你想要查看的区域从而实现生活中放大镜的效果。

预览获取

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

<body style="background: black;">
	<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">您的浏览器尚不支持canvas</canvas>
	<canvas id="offCanvas" style="display: none"></canvas>
	<script>
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');

		var offCanvas = document.getElementById('offCanvas');
		var offContext = offCanvas.getContext('2d');

		var image = new Image();
		var scale;
		var isMouseDown = false;


		window.onload = function () {
			canvas.width = 1152;
			canvas.height = 768;
			image.src = 'images/img-lg.jpg';

			image.onload = function () {
				offCanvas.width = image.width;
				offCanvas.height = image.height;
				scale = offCanvas.width / canvas.width;

				context.drawImage(image, 0, 0, canvas.width, canvas.height);
				offContext.drawImage(image, 0, 0)
			}
		}

		function windowToCanvas(x, y) {
			var bbox = canvas.getBoundingClientRect();
			return {
				x: x - bbox.left,
				y: y - bbox.top
			}
		}

		canvas.onmousedown = function (e) {
			e.preventDefault()
			isMouseDown = true;
			point = windowToCanvas(e.clientX, e.clientY);
			drawCanvasWithMagnifier(true, point)
		}

		canvas.onmouseup = function (e) {
			e.preventDefault()
			isMouseDown = false;
			drawCanvasWithMagnifier(false);
		}

		canvas.onmouseout = function (e) {
			e.preventDefault()
			isMouseDown = false
			drawCanvasWithMagnifier(false)
		}

		canvas.onmousemove = function (e) {
			e.preventDefault()
			if (isMouseDown) {
				point = windowToCanvas(e.clientX, e.clientY);
				drawCanvasWithMagnifier(true, point);
			}

		}

		function drawCanvasWithMagnifier(isShowMagnifier, point) {
			context.clearRect(0, 0, canvas.width, canvas.height);
			context.drawImage(image, 0, 0, canvas.width, canvas.height);

			if (isShowMagnifier) {
				drawMagnifier(point);
			}
		}

		function drawMagnifier(point) {
			var mr = 200;
			//将缩小版图片上点击的位置映射到大图上
			var imageLG_cx = point.x * scale;
			var imageLG_cy = point.y * scale;

			//将大图上对应的点移动到圆心
			var sx = imageLG_cx - mr;
			var sy = imageLG_cy - mr;

			var dx = point.x - mr;
			var dy = point.y - mr;

			context.save();

			context.lineWidth = 10;
			context.strokeStyle = '#069';
			context.beginPath();
			context.arc(point.x, point.y, mr, 0, 2 * Math.PI, false);
			context.stroke();
			context.clip();
			context.drawImage(offCanvas, sx, sy, 2 * mr, 2 * mr, dx, dy, 2 * mr, 2 * mr);
			context.closePath();
			context.restore();
		}
	</script>

</body>

SVG卡通创意粒子时钟动画特效

SVG卡通创意粒子时钟动画特效是一款非常简约美观的多边形网页时钟。

预览获取

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

<body class="wasp">
  <svg id="clock" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>
      text {
        font-family: 'Helvetica Bold', 'Helvetica', sans-serif;
        font-weight: bold;
      }
    </style>
  </svg>
</body>

Canvas光点放射动画特效

Canvas光点放射动画特效是一款类似于燃放烟花的效果其自身也会实现放射性动画，当然也可以通过点击实现横飞特效。

预览获取

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

<body>
  <script type="text/javascript" src="js/three.min.js"></script>
  <script type="text/javascript" src="js/Stats.min.js"></script>
  <canvas id="canvas"></canvas>
  <div id="stats"></div>
  <div class="instructions">点击页面</div>
</body>

CSS3 图文内容全屏层叠移动切换特效

CSS3 图文内容全屏层叠移动切换特效，可以实现鼠标左右移动来切换显示左右侧的内容。

获取预览

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 图文内容全屏层叠移动切换特效</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section id="wrapper" class="skewed">
        <div class="layer bottom">
            <div class="content_wrapper">
                <div class="content_body">
                    <h2>iphoneX-front</h2>
                    <p>一直以来，我们都心存一个设想，期待着能够打造出这样一部
                        iPhone：它有整面的屏幕，能让你在使用时完全沉浸其中，仿佛忘记了它的存在。它是如此智能，你的一触、一碰、一言、一语，哪怕是轻轻一瞥，都会得到它心有灵犀的回应。而这个设想，终于随着
                        iPhone X 的到来成为了现实。现在，就跟未来见个面吧。
                    </p>
                </div>
                <img src="img/front.png">
            </div>
        </div>
        <div class="layer top">
            <div class="content_wrapper">
                <div class="content_body">
                    <h2>iphoneX-back</h2>
                    <p>一直以来，我们都心存一个设想，期待着能够打造出这样一部
                        iPhone：它有整面的屏幕，能让你在使用时完全沉浸其中，仿佛忘记了它的存在。它是如此智能，你的一触、一碰、一言、一语，哪怕是轻轻一瞥，都会得到它心有灵犀的回应。而这个设想，终于随着
                        iPhone X 的到来成为了现实。现在，就跟未来见个面吧。
                    </p>
                </div>
                <img src="img/back.png">
            </div>
        </div>
        <div class="handle"></div>
    </section>
    <script src="js/main.js"></script>
</body>
</html>

以上就是文章的所有内容详细源码可通过预览获取点赞收藏不迷路.

迂幵

关注

9
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
13款趣味性不错(炫酷)的前端动画特效及源码(预览获取)分享（附源码）

基于canvas实现的动画特效，你既可以设置初始的打印文字也可以在下方输入文字可实现激光字体打印，精简易用。预览获取核心代码填色画游戏源码是基于canvas实现的填色游戏属于开阔性的游戏，通过选中色块，来给模型填充任意颜色。支持多种模型选择填色效果。预览获取核心代码盒子发光特效源码盒子发光特效源码呈现了卡片式边框发光渐变色的动画效果，鼠标悬停可实现边框全部发光的动效。预览获取核心代码canvas下雪动画特效canvas下雪动画特效，模拟了下雪路径的的场景动画效果，可用于设置网页背景图。预览获取
复制链接

扫一扫