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

最新推荐文章于 2024-07-30 13:04:17 发布
最新推荐文章于 2024-07-30 13:04:17 发布
阅读量991 收藏 14
点赞数 8
分类专栏： 前端 动画 分享 文章标签： 前端 前端特效 canvas特效 css特效 动画特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50594742/article/details/134714962
版权
分享 同时被 3 个专栏收录
85 篇文章 1 订阅
订阅专栏
前端
71 篇文章 3 订阅
订阅专栏
动画
53 篇文章 0 订阅
订阅专栏

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

基于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>
迂 幵
关注
  • 8
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10个前端动画库让你的交互更加炫酷
BYGFJ的博客
03-02 8046
Animate.css animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。 GitHub：github.com/animate-css… Hover.css Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此
985_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-03
源码中的JS可能包含了一些常见的网页特效，如滑动轮播图、下拉菜单、表单验证等，这些特效为网站增加了互动性和趣味性。同时，库如jQuery和框架如React、Vue等，可以简化JavaScript的开发并提高性能。 6. 模板应用...
分享6款非常炫酷的前端动画特效（附在线演示）
qq_50594742的博客
03-15 1497
分享6款非常不错的项目动画特效 其中有three.js特效、canvas特效、CSS动画、SVG特效等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的。
7个异常精美的Web前端动画效果的实现（一）
09-01
7个异常精美的Web前端动画效果的实现（一）
分享188个JS特效幻灯片PPT模板，总有一款适合你
最新发布
zy0412326的专栏
07-30 603
通过百度网盘分享的文件：188个JS特效幻灯片源码.rar。通过百度网盘分享的文件：188个JS特效幻灯片源码.rar。jQuery幻灯片插件SkitterSlideshow。jquery+css3幻灯片插件Bootslider。jQuery移动端幻灯片插件swipeslider。HTML5幻灯片切换插件Sequence.js。jQuery移动手机端幻灯片插件Swiper。jQuery+html5触屏手机幻灯片代码。jquery desoslide幻灯片插件。jQuery图片轮播幻灯片插件Diapo。
13款趣味性不错(炫酷)的前端动画特效及源码(预览获取)分享（附源码）
qq_50594742的博客
12-06 1310
基于canvas实现的动画特效，你既可以设置初始的打印文字也可以在下方输入文字可实现激光字体打印，精简易用。预览获取核心代码 填色画游戏源码 是基于canvas实现的填色游戏 属于开阔性的游戏，通过选中色块，来给模型填充任意颜色。支持多种模型选择填色效果。预览获取核心代码 盒子发光特效源码 盒子发光特效源码呈现了卡片式边框发光渐变色的动画效果，鼠标悬停可实现边框全部发光的动效。预览获取核心代码 canvas下雪动画特效 canvas下雪动画特效，模拟了下雪路径的的场景动画效果，可用于设置网页背景图。预览获取
前端特效整理
热门推荐
木子的博客
08-03 1万+
一、CSS3动画 名称 用途 链接 阴影波纹特效 1.元素hover效果 2.突出表现效果     http://www.jq22.com/code80 横板导航菜单动画 导航菜单 http://www.jq22.com/code181 横板导航菜单动画2 导航菜单 htt
前端入门之特效、动画
quettabyte
08-20 284
变形、过渡、渐变、滤镜、阴影、动画
基于CSS3实现弹性卡通怪物动画特效源码.zip
11-09
在本文中，我们将深入探讨如何使用CSS3技术创建一个弹性卡通怪物动画特效。CSS3是层叠样式表的最新版本，它引入了许多新的特性和功能，使得网页设计和动画制作更加丰富和动态。 首先，我们要了解CSS3中的关键帧动画...
【3款】网页正在维护中的鼠标特效html源码 特别漂亮
06-03
网页维护中的鼠标特效是前端开发中一种提升用户体验的巧妙手段，它可以给正在更新或维护的网站增添互动性和趣味性，让访客知道网站并非停滞不前，而是正在努力改进。本资源提供了三款特别漂亮的HTML源码，适用于那些...
卡通_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
在这款卡通主题的模板中，UI组件可能会有独特的卡通元素和色彩，如圆形边角、卡通图标、趣味性的字体等。 5. **移动端优化**：考虑到这个模板是为手机和平板设备设计的，开发者可能已经考虑到了触摸事件、性能优化...
前端页面酷炫特效示例
02-01
前端页面酷炫特效示例，包含数十个示例，所需引用文件都在压缩包里。
前端动画效果
07-04
很好的动画效果 关于导航栏的 大家可以看看 下载很好的动画效果 关于导航栏的 大家可以看看 下载
让前端疯狂的特效代码（3D，粒子动画，鼠标跟随）
07-23
资源来自网络,具体特效请自行拆分使用。 3D切换效果 icebox焦点图 I jQuery右侧晨浮框控制楼层切换-改良版 ToolTip浮动提示框效果 京东楼层 3D切换效果 icebox焦京图 R bootstrap-datetimepicker-masterzip CSs3动画效果自动登录表单zip CS3给图片添加旋转背景特效zip csS3立体式3D图片全屏转符效zip CSs3实现酷炫流光页面动画特效zip 追CSs3鼠标晨停下拉显示二维码zp Date. rar HTML5 Canva指针大转盘抽奖代码zip Ra html5-video-js-codes(b51. net).ra htm|5点击刷新验证码特效zip htm5仿手机QQ拆红包游戏代码zip htm5基于 canvas实现的园形时钟效果源 HTML5手机微信摇一摇游戏代码zip HTML5坦克大战网页小游戏zi htm5用手机号码注册表单代码zip HTML5园形图片横向轮搔切换代码,zip
7个异常精美的Web前端动画效果的实现（三）
09-01
7个异常精美的Web前端动画效果的实现（三）
7个异常精美的Web前端动画效果的实现（四）
09-01
7个异常精美的Web前端动画效果的实现（四）7个异常精美的Web前端动画效果的实现（四）
纯css3实现带有弹性的果冻动画特效源码.zip
11-20
本项目“纯css3实现带有弹性的果冻动画特效源码.zip”聚焦于利用CSS3的新特性来创建一种独特的动画效果——果冻（Jelly）动画。这种效果使得元素在页面上呈现出如同果冻般的弹性运动，为用户界面增添趣味性和互动性...
分享7款有关前端的动画特效（附静态效果图及在线演示）
qq_50594742的博客
01-25 667
分享7款有趣也实用的前端动画特效 其中有CSS动画、canvas动画、js小游戏等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的。
分享6款非常优质炫酷的前端动画特效（附在线演示）
qq_50594742的博客
03-15 902
基于SVG的自定义单选框按钮美化插件，它非常适合做一些精美的评分插件。以下效果图只能体现框架的内容没有具体的动画效果 这时你可点击在线预览进行查看在线预览。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值