html加载特效（怎么在html加特效）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
今天给各位分享html加载特效的知识，其中也会对怎么在html加特效进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、HTML5动画特效怎么做
- 2、怎么给html5背景加上js粒子特效
- 3、html特效
- 4、怎么在html中 加入一些特效 例如 html中 下雨 落叶
- 5、新手自学：怎样在html中引入幻灯片网页特效
HTML5动画特效怎么做
主要思想：
首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。
关键技术点：
JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，
另外一个参数代表间隔时间，单位为毫秒数。代码示例：
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法，需要指定全部9个参数：
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表
示源图像在目标Canvas上的起始坐标点。
!DOCTYPE html
html
head
meta http-equiv="X-UA-Compatible" content="chrome=IE8"
meta http-equiv="Content-type" content="text/html;charset=UTF-8"
titleCanvas Mouse Event Demo/title
link href="default.css" rel="stylesheet" /
script
var ctx = null; // global variable 2d context
var started = false;
var mText_canvas = null;
var x = 0, y =0;
var frame = 0; // 22 5*5 + 2
var imageReady = false;
var myImage = null;
var px = 300;
var py = 300;
var x2 = 300;
var y2 = 0;
window.onload = function() {
var canvas = document.getElementById("animation_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw rectangel
ctx = canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
myImage = document.createElement('img');
myImage.src = "../robin.png";
myImage.onload = loaded();
}
function loaded() {
imageReady = true;
setTimeout( update, 1000/30);
}
function redraw() {
ctx.clearRect(0, 0, 460, 460)
ctx.fillStyle="black";
ctx.fillRect(0, 0, 460, 460);
// find the index of frames in image
var height = myImage.naturalHeight/5;
var width = myImage.naturalWidth/5;
var row = Math.floor(frame / 5);
var col = frame - row * 5;
var offw = col * width;
var offh = row * height;
// first robin
px = px - 5;
py = py - 5;
if(px -50) {
px = 300;
}
if(py -50) {
py = 300;
}
//var rate = (frame+1) /22;
//var rw = Math.floor(rate * width);
//var rh = Math.floor(rate * height);
ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height);
// second robin
x2 = x2 - 5;
y2 = y2 + 5;
if(x2 -50) {
x2 = 300;
y2 = 0;
}
ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height);
}
function update() {
redraw();
frame++;
if (frame = 22) frame = 0;
setTimeout( update, 1000/30);
}
/script
/head
body
h1HTML Canvas Animations Demo - By Gloomy Fish/h1
prePlay Animations/pre
div id="my_painter"
canvas id="animation_canvas"/canvas
/div
/body
/html
怎么给html5背景加上js粒子特效
使用了particles.js
particles.js可以从github网站下载到最新的源码，网址是
使用方法非常简单
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
script src="particles.min.js"/script
第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
div id="particles-js"/div
style type="text/css"
#particles-js {
position: absolute;
top:0;
width:100%;
}
/style
第三步，设置窗口样式
style type="text/css"
#particles-js {
z-index: -1;
position: absolute;
top: 0;
width: 100%;
background: #aaa;
}/style
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在script标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js", { "particles": { "number": { "value": 380, "density": { "enable": true, "value_area": 800
}
}, "color": { "value": "#ffffff"
}, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000"
}, "polygon": { "nb_sides": 5
}, "image": { "src": "img/github.svg", "width": 100, "height": 100
}
}, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
}
}, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false
}
}, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
}, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200
}
}
}, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab"
}, "onclick": { "enable": true, "mode": "push"
}, "resize": true
}, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1
}
}, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
}, "repulse": { "distance": 200, "duration": 0.4
}, "push": { "particles_nb": 4
}, "remove": { "particles_nb": 2
}
}
}, "retina_detect": true});
html特效
1、你的那段放在body/body之间
2、要把文章内容放在p id="ccon"/div中间，并接在你那段后面；
2、再就是将这段代码放到head/head之间
script language="javascript"
//保存背景颜色和字号
function setSz()
{
var va = document.getElementById("bjColor").value;
setCookie("bjColor", va, 30);
va = document.getElementById("wzSize").value;
setCookie("wzSize", va, 30);
va = document.getElementById("wzColor").value;
setCookie("wzColor", va, 30);
va = document.getElementById("gd").value;
setCookie("gd", va, 30);
alert("保存成功!");
return ;
}
//设置背景颜色和字号
function getSz()
{
var bjColor = getCookie('bjColor');
var wzSize = getCookie('wzSize');
var wzColor = getCookie('wzColor');
var gd = getCookie('gd');
if(bjColor != null)
{
document.getElementById("ccon").style.background=bjColor;
setSelect(bjColor,"bjColor");
}
if(wzSize != null)
{
document.getElementById("ccon").style.fontSize=wzSize;
setSelect(wzSize,"wzSize");
}
if(wzColor != null)
{
document.getElementById("ccon").style.color=wzColor;
setSelect(wzColor,"wzColor");
}
if(gd != null)
{
SetScrollValue(gd);
setSelect(gd,"gd");
}
}
/*
* 设置滚动速度
*/
var currentpos,timer;
var scrollValue = 100;
function SetScrollValue(value)
{
scrollValue = value * 20;
}
function initialize()
{
timer = window.setInterval("scrollwindow()",scrollValue);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow()
{
currentpos = document.documentElement.scrollTop;
window.scroll(0,++currentpos);
window.status = currentpos;
if (currentpos != document.documentElement.scrollTop) sc();
}
document.ondblclick = function()
{
initialize();
}
document.onmousedown = function()
{
sc();
}
/script
怎么在html中 加入一些特效 例如 html中 下雨 落叶
这个要用到html5+css3，或者用jquery、JavaScript来做！具体细节请先学习这几种技术！
新手自学：怎样在html中引入幻灯片网页特效
这种开放性的网上都有免费代码。这是我随便找的一种幻灯片代码。你自己打开后修改一下就好了。
百度：幻灯片代码。能找到一大堆。。
关于html加载特效和怎么在html加特效的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
