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

文字激光打印特效

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

关于 mapboxgl 的常用方法及效果

关于 mapboxgl 的常用方法及效果

给地图标记点 实现效果 /*** 在地图上添加标记点* point: [lng, lat]* color: #83f7a0*/addMarkerOnMap(point, color #83f7a0) {const marker new mapboxgl.Marker({draggable: false,color: color,}).setLngLat(point).addTo(this.map);this.markersList.push(marker);},…
阅读更多...
从【注意力机制】开始的，零基础【大模型】系列

从【注意力机制】开始的，零基础【大模型】系列

注意力机制 原理&#xff1a;从关注全部到关注重点软注意力-计算方式传统注意力问题 键值注意力&#xff1a;单标签的检索系统计算方式 多头注意力&#xff1a;多标签的检索系统自注意力&#xff1a;对输入数据内部关系进行预处理计算方式 Transformer 原理&#xff1a;从关注全…
阅读更多...
医院预约挂号平台的设计与实现

医院预约挂号平台的设计与实现

摘 要 网络的空前发展给人们的工作和生活带来了极大的便利&#xff0c;信息技术已成为节约运营成本、提高工作效率的首选。相比之下&#xff0c;国内相当多的中小医院在医院预约工作中的手工工作比较保守&#xff0c;数据查询和存储成本都很高&#xff0c;但效率很低。为了使医…
阅读更多...
docker-compose部署sonarqube 8.9 版本

docker-compose部署sonarqube 8.9 版本

官方部署文档注意需求版本 所以选择8.9版本 一、准备部署配置 1、持久化目录 rootlocalhost:/root# mkdir -p /data/sonar/postgres /data/sonar/sonarqube/data /data/sonar/sonarqube/logs /data/sonar/sonarqube/extensions rootlocalhost:/root# chmod 777 /data/sona…
阅读更多...
天眼销为电销行业降低获客成本

天眼销为电销行业降低获客成本

当下&#xff0c;做电销的老板都有一个深刻体会&#xff1a;市场竞争越来越激烈&#xff0c;获客成本不断攀升&#xff0c;但效率不升返降&#xff0c;企业经营困难。特别是在这一两年&#xff0c;市场环境紧张&#xff0c;业务不好开展&#xff0c;更是雪上加霜。 销售也感觉…
阅读更多...
Matlab 曲线动态绘制

Matlab 曲线动态绘制

axes(handles.axes1); % 选定所画坐标轴 figure也可 h1 animatedline; h1.Color b; h1.LineWidth 2; h1.LineStyle -; % 线属性设置 for i 1 : length(x)addpoints(h1,x(i),y(i)); % x/y为待绘制曲线数据drawnow;pause(0.01); % 画点间停顿 end 示例&#xff1a; figure…
阅读更多...
BearPi Std 板从入门到放弃 - 引气入体篇（8）(ADC)

BearPi Std 板从入门到放弃 - 引气入体篇（8）(ADC)

简介 基于前面的文章, 缩略STM32CubeMx创建项目的过程&#xff0c;直接添加ADC相关初 始化; 开发板 &#xff1a; Bearpi Std(小熊派标准板) 主芯片: STM32L431RCT6 LED : PC13 \ 推挽输出即可 \ 高电平点亮 串口: Usart1 ADC1: PC2步骤 创建STM32CubeMX LED/串口ADC1初始…
阅读更多...
「音视频处理」音频编码AAC详解，低码率提高音质？

「音视频处理」音频编码AAC详解，低码率提高音质？

AAC&#xff08;高级音频编码&#xff09; 也称为 MPEG-4 音频。数码音频压缩和编码的标准方式。AAC 编码文件可与音乐光盘的质量相匹敌&#xff0c;且声音质量通常等同于或高于以相同或甚至更高的位速率编码的 MP3 文件。 我们按这样的顺序讨论 &#xff1a; 1、 封装格式的…
阅读更多...
如何使用 Zotero 导出所选条目的 PDF 文件

如何使用 Zotero 导出所选条目的 PDF 文件

如何使用 Zotero 导出所选条目的 PDF 文件 Zotero 是一款强大的参考文献管理工具&#xff0c;但它并不直接提供将整个文件夹导出为 PDF 的选项。不过&#xff0c;您可以使用以下步骤来导出您所选的 Zotero 条目中的 PDF 文件&#xff0c;无需额外的插件。 选择所需的 Zotero 条…
阅读更多...
2023年危险化学品生产单位安全生产管理人员证考试题库及危险化学品生产单位安全生产管理人员试题解析

2023年危险化学品生产单位安全生产管理人员证考试题库及危险化学品生产单位安全生产管理人员试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年危险化学品生产单位安全生产管理人员证考试题库及危险化学品生产单位安全生产管理人员试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&a…
阅读更多...
二叉树链式结构

二叉树链式结构

1.前置说明 我们手动构建一棵二叉树&#xff1a; 注意&#xff1a;上述代码并不是创建二叉树的方式 从概念中可以看出&#xff0c;二叉树定义是递归式的&#xff0c;因此后序基本操作中基本都是按照该概念实现的 2.二叉树的遍历 2.1前序、中序以及后序遍历 学习二叉树结构&a…
阅读更多...
基于c++版本链队列改-Python版本链队列基础理解

基于c++版本链队列改-Python版本链队列基础理解

##基于链表的队列实现 可以将链表的“头节点”和“尾节点”分别视为“队首”和“队尾”&#xff0c;规定队尾仅可添加节点&#xff0c;队首仅可删除节点。 ##图解 ##基于链表的队列实现代码 class ListNode:"""定义链表"""def __init__(self)…
阅读更多...
Nexus搭建npm私库（角色管理、上传脚本）

Nexus搭建npm私库（角色管理、上传脚本）

安装Nexus 官网下载 https://www.sonatype.com/products/sonatype-nexus-oss-download 进入官网下载&#xff0c;最新下载方式需要输入个人信息才能下载了 选择对应的系统进行下载 Windows 推荐也下载 UNIX 版本&#xff08;Windows 版本配置比较难改&#xff09; 如果没有下…
阅读更多...
​LeetCode解法汇总2477. 到达首都的最少油耗

​LeetCode解法汇总2477. 到达首都的最少油耗

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给你一棵 …
阅读更多...
org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource

org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource

DynamicDataSource-CSDN博客 /** Copyright 2002-2020 the original author or authors.** Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the L…
阅读更多...
排序算法基本原理及实现2

排序算法基本原理及实现2

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 &#x1f324;️冒泡排序 &#x1…
阅读更多...
解决mybatis-plus中，当属性为空的时候，update方法、updateById方法无法set null，直接忽略了

解决mybatis-plus中，当属性为空的时候，update方法、updateById方法无法set null，直接忽略了

问题描述 当indexId set 22的时候是可以set的 我们发现sql语句也是正常的 表中数据也被更改了 但是当我们indexId为空的时候 sql语句中没有了set indexId这一属性。。 既然属性都没了&#xff0c;表是肯定没做修改的 问题解决 在实体类对应的字段上加注解TableField(strategy…
阅读更多...
每日一练【有效三角形的个数】

每日一练【有效三角形的个数】

一、题目描述 611. 有效三角形的个数 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例 1: 输入: nums [2,2,3,4] 输出: 3 解释:有效的组合是: 2,3,4 (使用第一个 2) 2,3,4 (使用第二个 2) 2,2,3示例 2: 输入: nums [4,2…
阅读更多...
《WebGIS快速开发教程》第5版“惊喜”更新啦

《WebGIS快速开发教程》第5版“惊喜”更新啦

我的书籍《WebGIS快速开发教程》第5版&#xff0c;经过忙碌的编写&#xff0c;终于发布啦&#xff01; 先给大家看看新书的封面&#xff1a; 这次的封面我们经过了全新的设计&#xff0c;不同于以往的任何一个版本。从封面就可以看出第5版肯定有不小的更新。 那么我们话不多说…
阅读更多...
ChatGPT，作为一种强大的自然语言处理模型，具备显著优势，能够帮助您在各个领域取得突破

ChatGPT，作为一种强大的自然语言处理模型，具备显著优势，能够帮助您在各个领域取得突破

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…
阅读更多...
最新文章

Copyright @ 2022~2023