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

news2024/11/29 19:46:12

文字激光打印特效

基于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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1290852.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows server 部署iSCSI共享磁盘搭建故障转移群集

Windows server 部署iSCSI共享磁盘搭建故障转移群集

在域环境下&#xff0c;在域控制器中配置iSCSI服务&#xff0c;配置共享网络磁盘&#xff0c;在节点服务器使用共享磁盘&#xff0c;并在节点服务器中搭建故障转移群集&#xff0c;实现故障转移 环境准备 准备3台服务器&#xff0c;配置都是8g2核&#xff0c;50g硬盘&#xf…
阅读更多...
SpringBoot 属性配置解析

SpringBoot 属性配置解析

属性配置介绍 spring官方提供的17中属性配置的方式 Devtools全局配置测试环境TestPropertySource注解测试环境properties属性命令行参数SPRING_APPLICATION_JSON属性ServletConfig初始化参数ServletContext初始化参数JNDI属性JAVA系统属性操作系统环境变量RandomValueProperty…
阅读更多...
9大高效的前端测试工具与框架！

9大高效的前端测试工具与框架！

在每个Web应用程序中&#xff0c;作为用户直接可见的应用程序外观&#xff0c;“前端”包括&#xff1a;图形化的用户界面、相应的功能、及其整体站点的可用性。我们可以毫不夸张地说&#xff1a;如果前端无法正常工作&#xff0c;您将无法“拉新”网站的潜在用户。这也正是我们…
阅读更多...
HarmonyOS4.0从零开始的开发教程02初识ArkTS开发语言（上）

HarmonyOS4.0从零开始的开发教程02初识ArkTS开发语言（上）

HarmonyOS&#xff08;二&#xff09;初识ArkTS开发语言&#xff08;上&#xff09;之TypeScript入门 前言 Mozilla创造了JS&#xff0c;Microsoft创建了TS&#xff0c;而Huawei进一步推出了ArkTS。因此在学习使用ArkTS前&#xff0c;需要掌握基本的TS开发技能。 从最初的基…
阅读更多...
Kafka 的消息格式：了解消息结构与序列化

Kafka 的消息格式：了解消息结构与序列化

Kafka 作为一款高性能的消息中间件系统&#xff0c;其消息格式对于消息的生产、传输和消费起着至关重要的作用。本篇博客将深入讨论 Kafka 的消息格式&#xff0c;包括消息的结构、序列化与反序列化&#xff0c;以及一些常用的消息格式选项。通过更丰富的示例代码和深入的解析&…
阅读更多...
人工智能-编译器和解释器

人工智能-编译器和解释器

编译器和解释器 命令式编程使用诸如print、“”和if之类的语句来更改程序的状态。 考虑下面这段简单的命令式程序&#xff1a; def add(a, b):return a bdef fancy_func(a, b, c, d):e add(a, b)f add(c, d)g add(e, f)return gprint(fancy_func(1, 2, 3, 4)) 10 Python…
阅读更多...
【分布式微服务专题】从单体到分布式（一、SpringCloud项目初步升级）

【分布式微服务专题】从单体到分布式（一、SpringCloud项目初步升级）

目录 前言阅读对象阅读导航前置知识笔记正文一、单体服务介绍二、服务拆分三、分布式微服务升级前的思考3.1 关于SpringBoot/SpringCloud的思考【有点门槛】 四、SpringCloud升级整合4.1 新建父子项目 学习总结感谢 前言 从本节课开始&#xff0c;我将自己手写一个基于SpringC…
阅读更多...
谷歌刚刚发布了Gemini 1.0，采用了OpenAI的GPT4

谷歌刚刚发布了Gemini 1.0，采用了OpenAI的GPT4

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 对于谷歌和安卓来说&#xff0c;这是一个重要时刻。谷歌刚刚发布了 Gemini 1.0&#xff0c;这是其最新的LLM&#xff0c;它采用了 OpenAI 的 GPT4。 共有三种不同…
阅读更多...
WPF仿网易云搭建笔记(0):项目搭建

WPF仿网易云搭建笔记(0):项目搭建

文章目录 前言项目地址项目Nuget包搭建项目初始化项目架构App.xaml引入MateralDesign资源包 项目初步分析将标题栏去掉DockPanel初步布局 资源字典举例 结尾 前言 最近在找工作&#xff0c;发现没有任何的WPF可以拿的出手的工作经验&#xff0c;打算仿照网易云搭建一个WPF版本…
阅读更多...
深度解析 Kafka 中的 Offset 管理与最佳实践

深度解析 Kafka 中的 Offset 管理与最佳实践

Kafka 中的 Offset&#xff08;偏移量&#xff09;是消息处理的关键元素&#xff0c;对于保证消息传递的可靠性和一致性至关重要。本篇博客将深度解析 Kafka 中的 Offset 管理机制&#xff0c;并提供丰富的示例代码&#xff0c;让你更全面地理解 Offset 的原理、使用方法以及最…
阅读更多...
鸿蒙Harmony ArkUI十大开源项目

鸿蒙Harmony ArkUI十大开源项目

一 OH哔哩 https://gitee.com/ohos_port/ohbili 项目简介 【OH哔哩】是一款基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端 用到的三方库 bilibili-API-collect 哔哩哔哩-API收集整理ohos_ijkplayer 基于FFmpeg的视频播放器PullToRefresh 下拉刷新、上拉加载组件…
阅读更多...
html通过CDN引入Vue组件抽出复用

html通过CDN引入Vue组件抽出复用

html通过CDN引入Vue组件抽出复用 近期遇到个需求&#xff0c;就是需要在.net MVC的项目中&#xff0c;对已有的项目的首页进行优化&#xff0c;也就是写原生html和js。但是咱是一个写前端的&#xff0c;写html还可以&#xff0c;.net的话&#xff0c;开发也不方便&#xff0c;还…
阅读更多...
CleanMyMac X4.15.0最新官方和谐版下载

CleanMyMac X4.15.0最新官方和谐版下载

Mac系统进行文件清理&#xff0c;一般是直接将文件拖动入“废纸篓”回收站中&#xff0c;然后通过清理回收站&#xff0c;就完成了一次文件清理的操作&#xff0c;但是这么做并无法保证文件被彻底删除了&#xff0c;有些文件通过一些安全恢复手段依旧是可以恢复的&#xff0c;那…
阅读更多...
持续集成交付CICD： Sonarqube REST API 查找与新增项目

持续集成交付CICD： Sonarqube REST API 查找与新增项目

目录 一、实验 1.SonarQube REST API 查找项目 2.SonarQube REST API 新增项目 一、实验 1.SonarQube REST API 查找项目 &#xff08;1&#xff09;Postman测试 转换成cURL代码 &#xff08;2&#xff09;Jenkins添加凭证 &#xff08;3&#xff09;修改流水线 pipeline…
阅读更多...
解决finalshell右键选择粘贴后出现直接执行的问题

解决finalshell右键选择粘贴后出现直接执行的问题

文章目录 已经找到问题原因我的问题错误的解决 已经找到问题原因 复制的时候&#xff0c;只复制名字&#xff0c;不要复制后面多出来的东西&#xff0c;不然会自动加上回车换行 我的问题 我当时是想通过 ls -l 查出jdk的文件后&#xff0c; 复制文件名就不用看着敲了&#x…
阅读更多...
李宏毅bert记录

李宏毅bert记录

一、自监督学习&#xff08;Self-supervised Learning&#xff09; 在监督学习中&#xff0c;模型的输入为x&#xff0c;若期望输出是y&#xff0c;则在训练的时候需要给模型的期望输出y以判断其误差——有输入和输出标签才能训练监督学习的模型。 自监督学习在没有标注的训练…
阅读更多...
U-boot(八):官方uboot移植

U-boot(八):官方uboot移植

本文主要探讨从ubboot官方移植uboot到x210。 基础 确定设备的配置文件 通过board.cfg中的cpu型号(s5pc1xx)确定设备的配置文件 头文件:include/configs/s5p_goni.h cpu: u-boot-2013.10\arch\arm\cpu\armv7 board: u-boot-2013.10\b…
阅读更多...
AI 绘画 | Stable Diffusion 动漫人物真人化

AI 绘画 | Stable Diffusion 动漫人物真人化

前言 如何让一张动漫人物变成真实系列人物？Stable Diffusion WebUI五步即可实现。快来使用AI绘画打开异世界的大门吧！！！ 动漫真人化 首先在图生图里上传一张二次元动漫人物图片，然后选择一个真实系人物画风的大模型，最后点击DeepBooru 反推，自动填充提示词，调整重绘…
阅读更多...
CleanMyMac x4.15软件应用程序永久使用

CleanMyMac x4.15软件应用程序永久使用

许多刚从Windows系统转向Mac系统怀抱的用户&#xff0c;一开始难免不习惯&#xff0c;因为Mac系统没有像Windows一样的C盘、D盘&#xff0c;分盘分区明显。因此这也带来了一些问题&#xff0c;关于Mac的磁盘的清理问题&#xff0c;怎么进行清理&#xff1f;怎么确保清理的干净&…
阅读更多...
系统设计-缓存介绍

系统设计-缓存介绍

该图说明了我们在典型架构中缓存数据的位置。 沿着流程有多个层次。 客户端应用程序&#xff1a;HTTP 响应可以由浏览器缓存。我们第一次通过 HTTP 请求数据&#xff0c;返回时在 HTTP 标头中包含过期策略&#xff1b;我们再次请求数据&#xff0c;客户端应用程序首先尝试从浏…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023