超棒的HTML5丝带背景效果
使用HTML5生成的画布彩带效果，使用原生canvas生成最后效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>丝带</title>
<style type="text/css">
body{
width:100%;
margin:0;
overflow:hidden;
user-select:none;
}
#info {
border-radius: 3px;
margin: 0;
position: fixed;
top: 0;
right: 0;
width:25em;
padding:1em;
text-align:center;
line-height:1.3em;
transition: right 0.3s cubic-bezier(.65,.18,.79,.3);
font-family: 'microsoft yahei',Arial,sans-serif;
color: orange;
font-size:14px;
}
</style>
</head>
<body>
<canvas id = 'canv'></canvas>
<div id = 'info'>
点击屏幕修改背景色~~~
</div>
<script>
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var c = document.getElementById('canv'),
$ = c.getContext('2d'),
w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
arr = [],
u = 0;
o = 0,
$.fillStyle = '#FEFAE6';
$.fillRect(0,0,w,h);
$.globalCompositeOperation = "source-over";
var inv = function() {
$.restore();
$.fillStyle = "#" + (o ? "FEFAE6" : "000000");
$.fillRect(0, 0, w, h);
$.fillStyle = "#" + (o ? "000000" : "FEFAE6");
$.save()
};
window.addEventListener("touchstart", function(e){
e.preventDefault();
o = !o;
inv()
}, false);
window.addEventListener("mousedown", function(e){
o = !o;
inv()
}, false);
window.addEventListener("keydown", function(keydn) {
if (keydn.keyCode == 32) {
o = !o;
inv()
}
}, false);
window.addEventListener('resize', function(){
c.width = window.innerWidth;
c.height = window.innerHeight;
}, false);
var ready = function() {
arr = [];
for (var i = 0; i < 20; i++) {
set();
}
}
var set = function() {
arr.push({
x1: w,
y1: h,
_x1: w - Math.random() * w,
_y1: h - Math.random() * h,
_x2: w - Math.random() * w,
_y2: h - Math.random() * h,
x2: -w + Math.random() * w,
y2: -h + Math.random() * h,
rot: Math.random() * 180,
a1: Math.random() * 10,
a2: Math.random() * 10,
a3: Math.random() * 10
});
}
var pretty = function() {
u-=.2;
for (var i in arr) {
var b = arr[i];
b._x1 *= Math.sin(b.a1 -= 0.001);
b._y1 *= Math.sin(b.a1);
b._x2 -= Math.sin(b.a2 += 0.001);
b._y1 += Math.sin(b.a2);
b.x1 -= Math.sin(b.a3 += 0.001);
b.y1 += Math.sin(b.a3);
b.x2 -= Math.sin(b.a3 -= 0.001);
b.y2 += Math.sin(b.a3);
$.save();
$.globalAlpha = 0.03;
$.beginPath();
$.strokeStyle = 'hsla('+ u + ', 85%, 60%, .7)';
$.moveTo(b.x1, b.y1);
$.bezierCurveTo(b._x1, b._y1, b._x2, b._y2, b.x2, b.y2);
$.stroke();
$.restore();
}
window.requestAnimFrame(pretty);
}
ready();
pretty();
setTimeout(function() {
var info= document.getElementById('info');
info.style.right = '-500px';
}, 5500);
</script>
</body>
</html>
.
相关推荐
在这个特定的案例中，“HTML5 Canvas透明丝带飘动背景动画特效”是一个利用Canvas API实现的优雅视觉效果，它通过流动的线条来模拟丝带在空中飘动的情景，为网站增添了一种动态且梦幻的氛围。 首先，让我们深入了解...
标题"three.js+html5 canvas丝带飘动动画特效"涉及到的主要技术是`three.js`和`HTML5 Canvas`，这两者都是网页开发中的关键工具。`three.js`是一个基于WebGL的3D库，用于在浏览器中创建3D图形。而`HTML5 Canvas`则是...
在这个“HTML5 Canvas透明丝带飘动背景动画特效”中，我们可以看到Canvas技术与JavaScript库jQuery以及CSS样式相结合，创造出引人入胜的视觉效果。 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的画布元素...
`css`文件主要负责页面的样式调整，例如设置Canvas的边框、背景色等，或者为页面添加其他元素以增强视觉效果。 总的来说，这款HTML5 Canvas彩色粒子丝带飘动动画特效通过Canvas API实现了粒子的动态生成、移动和...
【炫酷流光丝带网页背景canvas特效】是一种利用JavaScript和HTML5的canvas元素实现的动态视觉效果。在网页设计中，这样的特效可以为网站增添动态感和科技感，吸引用户的注意力，提升用户体验。JavaScript是网页开发...
【标题】"three.js+html5 canvas丝带飘动动画特效.zip" 提供了一个使用Three.js库和HTML5 Canvas技术创建的丝带飘动动画效果。这个项目旨在为网页增加动态视觉吸引力，适用于各种需要炫酷图形展示的场景，如网站背景...
Canvas API提供了`context.fillStyle`和`context.strokeStyle`来设置填充色和描边色，开发者可能通过循环和随机函数来生成不同的彩色线条，使得整个画面呈现出多彩而虚幻的视觉效果。 此外，JavaScript的定时器（如...
本资源包含一个使用HTML5 canvas实现的透明丝带飘舞动画效果的源码，非常适合用于网页背景装饰或者游戏设计，能够为用户带来独特的视觉体验。 在HTML5 canvas中，我们可以使用JavaScript来操纵每一帧的绘图操作，...
在描述中提到的“透明飘动的丝带背景动画”，其实现方式可能包括以下步骤： 1. **初始化Canvas**：在JavaScript中，首先需要获取`<canvas>`元素的引用，然后创建一个2D渲染上下文，如`var ctx = canvas.getContext...
总结来说，"H5 Canvas透明菱形元素背景特效"是通过Canvas API和JavaScript实现的一个动态背景效果。它涉及了图形绘制、颜色处理、透明度控制以及动画制作等多个知识点，充分展示了Web前端的动态视觉设计能力。通过...
同时，JavaScript还会根据用户交互或时间变化更新粒子的状态，创造出飘动的丝带效果。 在`css`目录中的样式文件则负责调整网页的整体布局和视觉风格。这可能包括设置`canvas`元素的尺寸、背景色，以及任何其他辅助...
HTML5丝带飘动背景动画特效是一个利用现代Web技术实现的动态视觉效果，它结合了HTML、CSS和JavaScript，特别是jQuery库，为网页提供了一种引人注目的装饰元素。这个压缩包“HTML5丝带飘动背景动画特效.zip”包含了一...
这种效果常用于网站加载动画、背景装饰或者数据可视化中，能增加用户的视觉体验和互动感。 在Vue.js中实现粒子线条效果，开发者可能使用了以下技术点： 1. **Vue组件**：将粒子线条效果封装成独立的Vue组件，便于...
在这个“html5 canvas彩色虚幻发光丝带3D旋转动画特效”中，我们可以推测这是一个利用Canvas API创建的3D动画，通过彩色丝带的形态，营造出一种虚幻发光的效果，并且这些元素还能进行3D旋转，为网页添加了生动和互动...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉效果。这款“HTML5 Canvas流动线条动画特效”利用了Canvas元素的API，为网页设计提供了创新的背景动画。 在HTML5...
在现代网页设计中，视觉效果和用户体验是至关重要的元素，Canvas 3D线条动画特效能够为网站增添引人入胜的动态元素。本特效利用HTML5的Canvas元素结合Three.js库，创造出震撼的3D线条动画，提升网页的互动性和艺术感...
在这个模板中，它被用来创建酷炫的丝带背景动画，通过JavaScript控制canvas上的像素操作，实现动态视觉效果，增加页面的吸引力和互动性。 3. **ECMAScript**：ECMAScript（通常称为ES）是JavaScript的标准化规范。...
此外，HTML5的其他特性如`canvas`或WebGL也可能被用于增强整个场景的背景或者添加额外的视觉元素，如飘落的花瓣或者闪烁的星光，以增加节日氛围。 总的来说，这个情人节盒子弹出爱心动画特效源码展示了HTML5和SVG在...
RibbonMenu是一种创新的菜单设计，它以带状或丝带的形式展示菜单选项，增加了视觉吸引力并提高了操作效率。本篇文章将深入探讨如何在Android中实现RibbonMenu，基于Java源码和Eclipse环境。 首先，我们需要理解...